Fixed props key was spread into JSX FitImage

[cc-matthias-m]

Hi,

With the last version of react-native (0.75.4), the package display a warning for a deprecated code :

 ERROR  Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, indicator: ..., style: ..., source: ..., accessible: ..., accessibilityLabel: ...};
  <FitImage {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {indicator: ..., style: ..., source: ..., accessible: ..., accessibilityLabel: ...};
  <FitImage key={someKey} {...props} />

So I create this PR to fix it. As you can see, it’s really a light commit.

This PR work with last react-native version and previous one.

Do you think create a new npm patch 7.0.3 to add this modification ?

Thanks for reading.

[mberenguer-adding]

Can you merge this pull request? Is there any problem with this?

[cc-matthias-m]

Can you merge this pull request? Is there any problem with this?

Until the merge was done. You could fork my PR and use it in your project.
If you use yarn, you could put in package.json :

    "react-native-markdown-display": "https://github.com/XXXXXXXX/react-native-markdown-display#master",

[mberenguer-adding]

Of course, thanks for it. But I think it could be simply just merged. It is a pretty simple to review and useful bug fix.

[tahaipek]

Hi,

Thank you for your solution.

Until the open PR is merged, you can temporarily apply this change to your project with the patch-package package.

react-native-markdown-display+7.0.2.patch

diff --git a/node_modules/react-native-markdown-display/src/lib/renderRules.js b/node_modules/react-native-markdown-display/src/lib/renderRules.js
index 6f2ed8d..8a276ad 100644
--- a/node_modules/react-native-markdown-display/src/lib/renderRules.js
+++ b/node_modules/react-native-markdown-display/src/lib/renderRules.js
@@ -284,7 +284,6 @@ const renderRules = {
 
     const imageProps = {
       indicator: true,
-      key: node.key,
       style: styles._VIEW_SAFE_image,
       source: {
         uri: show === true ? src : `${defaultImageHandler}${src}`,
@@ -296,7 +295,7 @@ const renderRules = {
       imageProps.accessibilityLabel = alt;
     }
 
-    return <FitImage {...imageProps} />;
+    return <FitImage key={node.key} {...imageProps} />;
   },
 
   // Text Output

[rizikolik]

Could you tell us when are you gonna merge this ?