React-native-render-html: tagsStyles doesn't re-render

[DAHUO-Melbourne]

tagsStyles read the font size from store, and the font size changes with the slider bar value. I am sure that the component re-rendered, and I could get the value from store. But the font size in tagsStyles doesn't changes.

[wangyannick]

Same issue here

[castalonirenz]

Same here any fix?

[edjansantos]

Same issue here

[castalonirenz]

i have fix for this, you must declare a key for your render html once the key change it will trigger re-render of your component. hope this help

[huferry]

i have fix for this, you must declare a key for your render html once the key change it will trigger re-render of your component. hope this help

I'm not quite sure by declare a key. Can you give me an example? (this is a beginner's question, my apologies) Thanks!!

[castalonirenz]

Yes this is working for me

On Mon, Apr 13, 2020 at 5:44 PM Ferry Utomo [e-mail]
wrote:

i have fix for this, you must declare a key for your render html once the
key change it will trigger re-render of your component. hope this help

I'm not quite sure by declare a key. Can you give me an example? (this is
a beginner's question, my apologies) Thanks!!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-render-html/issues/343#issuecomment-612831897,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADHUSHJKG4O2TPIOUPXEDXLRMLNJTANCNFSM4KYIEV3A
.

[aashish-pixere]

Yes this is working but it's showing some latency while updating the font size.

[castalonirenz]

what do you mean by latency?

On Wed, Apr 15, 2020 at 6:23 PM Aashish Singhal [e-mail]
wrote:

Yes this is working but it's showing some latency while updating the font
size.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/archriss/react-native-render-html/issues/343#issuecomment-613953571,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADHUSHMPAQIYONA24GQVVSTRMWDIXANCNFSM4KYIEV3A
.

[aashish-pixere]

what do you mean by latency?
…
On Wed, Apr 15, 2020 at 6:23 PM Aashish Singhal @.*> wrote: Yes this is working but it's showing some latency while updating the font size. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#343 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHUSHMPAQIYONA24GQVVSTRMWDIXANCNFSM4KYIEV3A .

let me explain you again what i am facing issue when i implemented key for html render. Screen always re-rendering, not seems like font size increasing and decreasing smoothly. I hope you got my point and please let me what approach i can use.

If i applied this method forcefully in HTML library (node_modules/react-native-render-html/src/HTML.js ) :

componentWillReceiveProps (nextProps) {
const { html, uri, renderers } = this.props;

     if (html !== nextProps.html || uri !== nextProps.uri) {
         // If the source changed, register the new HTML and parse it
         this.registerDOM(nextProps);
     } else {
         // If it didn't, let's just parse the current DOM and re-render the nodes
         // to compute potential style changes
         this.parseDOM(this.state.dom, nextProps);
     }

}

Then it's work smoothly for font size increase and decreasing after changes with the slider bar but i thought it's not a good way to change in the library. So please guide me what approach i should follow.

[peacechen]

@aashish-pixere
componentWillReceiveProps was replaced by componentDidUpdate (for the most part) in React 16.3.
https://github.com/archriss/react-native-render-html/blob/master/src/HTML.js#L86

Try to replace componentDidUpdate with componentWillUpdate. Remove your additional componentWillReceiveProps callback of course.

If that fixes it, the issue may stem from a feedback loop. The component receives new props, the updates sets state which causes another update, and the process repeats indefinitely.

[mkamals]

I'm not quite sure by declare a key. Can you give me an example? (this is a beginner's question, my apologies) Thanks!!

Check this:

const myHTMLTagStyles = {
        p: { fontSize: 18 },
        body: { fontSize: 18 },
    };
<HTML tagsStyles={myHTMLTagStyles} />

[gilmarsquinelato]

Hello guys, any update on this issue?
We have an open PR that can fix this issue.

I'm working in a product that is using this library, and I needed to use the key workaround.
Without that workaround, we can't properly enable DarkMode on components that uses this renderer.

Thanks!

[jsamr]

In version 4.2.2, HTML component will re-render on tagsStyles and classesStyles changes.
You can test a pre-release version now, see #385.

[amdrade]

@jsamr thanks for react-native-render-html!

Is possible re-render on baseFontStyle update?
I need to implement a font size control for the user, changing only the baseFontStyle value I don't need to change the style of the other tags manually.

Add || baseFontStyle !== this.props.baseFontStyle on componentDidUpdate work for me.

[jsamr]

@amdrade Don't really have much time for this right now, but a PR is welcome!

[nsantacruz]

@jsamr I see that @amdrade's PR for this (#436) was merged but I don't believe it was ever released. I'm not seeing his commit on master. I'm using v5.0.1

[jsamr]

@nsantacruz The dev/4.x branch had diverged from master at that point. I've ported the feature in the 5.1.0 release!