React 0.74 - Update defaultProps to JavaScript default parameters.

[nd-gorm]

Decision Table

• [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• [X] I have read the HELP document here: https://git.io/JBi6R
• [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• [X] I have confirmed that this bug has not been reported yet

Description

Hi it seems most components are setup to use TS defaultProp, which will be removed from function components. I suppose this future error is present in all components using defaultProps.

React Native Information

`Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.`

`MemoizedTNodeRenderer: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.`

RNRH Version

6.3.4

Tested Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [ ] Android
• [ ] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

Run in a React Native project >= 0.74

Additional Notes

No response

[Simba-Mupfunya]

same issue as @nd-gorm

[QuentinOber]

same issue as @nd-gorm .-)

[bruce-mec]

Same, after upgrading to react native 0.74

[ivanoikon]

Same issue here. But the question is: is this project still alive?

[yeezussniper]

I see attempts to fix this (https://github.com/meliorence/react-native-render-html/commit/f0c7e34571f613fc70d183955661cd23df420238). But they failed the test. There are suspicions that the project is really abandoned :(

[djMax]

I reached out with an offer to sponsor and have not heard back, so I have similar concerns. Perhaps time for a fork? Or perhaps @meliorence can add a maintainer.

[ba361006]

same here, will show the warning as below

ERROR  Warning: TNodeChildrenRenderer: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
ERROR  Warning: MemoizedTNodeRenderer: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.
ERROR  Warning: TRenderEngineProvider: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Version:

• react-native-render-html: 6.3.4
• react native: 0.74.1
• react: 18.2.0

[yeezussniper]

@djMax and @ba361006 Eventually, I took this package and made it for myself inside my project

https://www.npmjs.com/package/htmlparser2-without-node-native

[djMax]

But this doesn't do any of the translation to React components, no? That's the main magic bit of this module, IMHO.

[yeezussniper]

No, I just needed to display the users html in the View

[chriszs]

The CI step that failed when merging a fix in #658 was a linting step. Lint errors were fixed in #660, in which regarding the potential for a release the maintainer said, "I cannot promise anything, but will consider releasing when I find some time off." So, a fix may be released, but not on any definite timeline.

[linusrush]

Also looking forward to the fix release

[bytemtek]

same issue as @nd-gorm

[IvanMijic0]

Same issue as @nd-gorm

[Cube321]

same issue as @nd-gorm

[bytemtek]

Is there any solution ?

[ivanoikon]

I solved switching to this library while waiting for a fix react-native-html-text-view.

[bytemtek]

I solved switching to this library while waiting for a fix react-native-html-text-view.

Thank you so much.

[QuentinOber]

I switched to react-native-htmlview and it's working fine so far; smooth transation.

[tmeduho]

@jsamr any update?

[AronBe]

@skb1129 was the work done but not yet released?

https://github.com/meliorence/react-native-render-html/commit/f0c7e34571f613fc70d183955661cd23df420238

[tmeduho]

@AronBe correct, see https://github.com/meliorence/react-native-render-html/pull/660

[ycldz]

same issue

[edritech93]

same issue for me, try switch to react-native-htmlview

[vinz-mehra]

@tmeduho So, do we have to wait now? or can we use this GitHub branch as a package on my project? Is there any workaround?

[TheRealMikeD]

Unfortunately, react-native-htmlview is missing a lot of features that this library has, which makes it a less than ideal replacement. At least, in my experience.

Hoping for a release soon!

[awlodarczyk]

if someone needs, here is patch-package fixing issue

react-native-render-html+6.3.4.patch

[ivanoikon]

if someone needs, here is patch-package fixing issue

react-native-render-html+6.3.4.patch

How can be used?

[Cube321]

Hi Adam, amazing, thanks so much! :) However, I also struggle a bit how to properly implement it to the project. Would it be possible to give us few words of guidance? Thank so much! Jakub

[PadovaY]

@ivanoikon @Cube321 patch-package is an npm package that allows to make modifications in npm dependencies. see in the provided link.

[DeepakSharma04]

Hi guys , can anybody tell me how i can pass unique id in it and fetch it in the render method.

 <RenderHtml
       //any props here where i send unique key and fetch it in render method.
       source={{ html: item.body }}
       contentWidth={width}
       renderers={renderers}
    />

const renderers = {
    redacted: (htmlAttribs, children, convertedCSSStyles, passProps) => {
     if (htmlAttribs) {
            console.log('unique id ',passProps.index); // getting undefined here
        } 
};

[Simba-Mupfunya]

@ivanoikon @Cube321 Step 1: npm install --save-dev patch-package postinstall-postinstall Step 2: copy the 'react-native-render-html+6.3.4.patch' file to the patches folder that should exist in the route folder (ios, android, src, node_modules, patches) Step 3: add "scripts": { "postinstall": "patch-package" } if it is not there in package.json Step 4: npm install

post install should mean that when you build the patch is reapplied , hope this helps

[awlodarczyk]

@ivanoikon @Cube321 like @Simba-Mupfunya said, You need patch-package in your project installed. after that just put patch file to patches directory and run npx/npm/yarn patch-package

this should override files in react-native-render-html and solve defaultProps issue

[Cube321]

Thanks guys, it worked! However, I had to create the "patches" folder manually before uploading the file from @awlodarczyk and running npx patch-package.

[nimesh5233]

if someone needs, here is patch-package fixing issue

react-native-render-html+6.3.4.patch

yes working fine for me , thanks

[matiasgalo999]

@ivanoikon @Cube321 Step 1: npm install --save-dev patch-package postinstall-postinstall Step 2: copy the 'react-native-render-html+6.3.4.patch' file to the patches folder that should exist in the route folder (ios, android, src, node_modules, patches) Step 3: add "scripts": { "postinstall": "patch-package" } if it is not there in package.json Step 4: npm install

post install should mean that when you build the patch is reapplied , hope this helps

In my case I had to manually create a "patches" folder in the root directory of my app after installing patch-package.

[hyuk9833]

I made "pathes" forder and run "npm install" but it's not my solution. Is there any other option?

[Simba-Mupfunya]

I made "pathes" forder and run "npm install" but it's not my solution. Is there any other option?

@hyuk9833 I think you have a typo in "patches"

[hyuk9833]

I made "pathes" forder and run "npm install" but it's not my solution. Is there any other option?

@hyuk9833 I think you have a typo in "patches"

umm reply has typo but my forder name is right spell.How can I make sure that the patch went well

Is this log working properly?

[lorenjohnson]

Thanks @awlodarczyk! Works for me. FYI: In a comment to react-native-render-html+6.3.4.patch I added the same patch with the package relative paths expected by "yarn patch" vs using patch-package.

[Zodiarche]

@ivanoikon @Cube321 Step 1: npm install --save-dev patch-package postinstall-postinstall Step 2: copy the 'react-native-render-html+6.3.4.patch' file to the patches folder that should exist in the route folder (ios, android, src, node_modules, patches) Step 3: add "scripts": { "postinstall": "patch-package" } if it is not there in package.json Step 4: npm install

post install should mean that when you build the patch is reapplied , hope this helps

Works for me too, even if we are not on an architecture with iOS/Android/src/node_modules :

• "expo": "~51.0.20",
• "react": "18.2.0",
• "react-native": "0.74.3",

Don't forget to create the patches folder for people in my situation.

[customputing]

I am glad to see a fix is happening, will it get merged so I can update with npm? This is the only html render option I found to work in mine.

[dezudas]

what about creating a Fork for this, could have been better then patch

[DanielKuhn]

There's lots of forks - would anyone care to become the official? Anyways: I tried applying the react-native-render-html+6.3.4.patch to no avail, but found the same changes as a commit in the fork by @TuurDutoit: https://github.com/TuurDutoit/react-native-render-html/commit/f0c7e34571f613fc70d183955661cd23df420238 So I created the 588th fork of this project and simply cherry-picked that commit on top...

[DanielKuhn]

Upon further development I found that this fork by @meliorence already seems to be the official one (at least it's being referenced by npm: https://www.npmjs.com/package/react-native-render-html), and it's already released as 6.4.0 AND the master branch already includes the commit with the fix.

Can anyone tell me then, why I can't install version 6.4.0 via package.json, as in "react-native-render-html": "6.4.0", ?

[david-cahill]

The patch doesn't fix the issue for me either. @DanielKuhn You can point to master branch from package.json like: "react-native-render-html": "meliorence/react-native-render-html#master" however this fails during yarn install with the following error:

const configPluginsFirstPass = extendDefaultPlugins([
                               ^

TypeError: extendDefaultPlugins is not a function
    at Object.<anonymous> (/node_modules/react-native-render-html/scripts/processSvgAssets.js:9:32)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
    at node:internal/main/run_main_module:28:49

[DanielKuhn]

@david-cahill Yes, same here. This is due to react-native-render-html being a monorepo where the actual code resides in packages/render-html, therefore you need to go through gitpkg and specify the current master's commit like so:

"react-native-render-html": "https://gitpkg.now.sh/meliorence/react-native-render-html/packages/render-html?71e5199017f78d6f0b194a8941064e6860eee75a"

[DanielKuhn]

This is painful, though. It seems like original maintainer @jsamr ran out of steam on these packages. He released version 6.4.0 in https://github.com/meliorence/react-native-render-html/commit/b861fdf81af59d104c78d481b549d89d789c8971 with changelog, but seems to have forgotten to bump the version number in packages/render-html/package.json, therefore it's still referenced as 6.3.4 in yarn.lock, plus it's not published to npm...

Anyways, now that the fix is applied I get a new defaultProps-related warning from the table-plugin. I'll try to fix that next.

[david-cahill]

Unfortunately the gitpkg approach results in a bunch of type declaration errors on my side. @jsamr Is there any chance you can publish 6.4.0 to npm to avoid these work-arounds?

[bruce-mec]

@david-cahill, I was able to use the patch suggested by @awlodarczyk above. This is how I got it to work.

Add the following as devDependencies

"patch-package": "^8.0.0" 
"postinstall-postinstall": "^2.1.0"

Create a "patches" folder in the root of your project Copy the react-native-render-html+6.3.4.patch file into that folder.

Add postinstall to your scripts section in package.json

"scripts": {
    "postinstall": "patch-package"
    ......
}

You should now be able to run npm or yarn and get the following result. ** if you get an error about "patch....could not be parsed". It's likely a CRLF issue in the patch file sometimes caused by the windows file system if you're using windows. See here

% yarn yarn install v1.22.22 [1/4] 🔍 Resolving packages... success Already up-to-date. $ patch-package patch-package 8.0.0 Applying patches... react-native-render-html@6.3.4 ✔ ✨ Done in 0.52s.