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 ?

[MahmoudMabrok]

@cc-matthias-m could you raise same PR on https://github.com/MahmoudMabrok/mo3ta-markdown

[cc-matthias-m]

@cc-matthias-m could you raise same PR on https://github.com/MahmoudMabrok/mo3ta-markdown

@MahmoudMabrok It seems that you project don’t accept PR. I have forked you project here https://github.com/ClubConnect/mo3ta-markdown.

On the creation of a new PR, I can’t select you project https://github.com/MahmoudMabrok/mo3ta-markdown as destination.

[MahmoudMabrok]

@cc-matthias-m for forks, you must fork first, then open pr from your fork to my fork like we did in current fork.

i raised and merged the PR, could u try again with any dummy channge

[cc-matthias-m]

@cc-matthias-m for forks, you must fork first, then open pr from your fork to my fork like we did in current fork.

i raised and merged the PR, could u try again with any dummy channge

Ok, thanks @MahmoudMabrok , I found what I’m doing wrong. I send to your project the PR. I adapt the code to your project. There is just one change now.