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 ***@***.***> 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 <#343 (comment)>, 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 ***@***.***> 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> .

[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!

[rabiaah]

Facing issue related to the RTL.
Who can provide RTL css example?

The textAlign is ok, but the paragraph is not for example the Dot starting the paragraph instead of ending it.

[jsamr]

@rabiaah If you referring to lists, see https://meliorence.github.io/react-native-render-html/docs/content/lists#experimental-rtl-mode; please ask for anything else in our Discord channel! Thanks.

[rabiaah]

@rabiaah If you referring to lists, see https://meliorence.github.io/react-native-render-html/docs/content/lists#experimental-rtl-mode; please ask for anything else in our Discord channel! Thanks.

Not really related to the lists, I have 2 issues in the attached screenshot:

1. English string should start the paragraph not ending it.
2. The Dot should end the paragraph not to starting it.

[jsamr]

@rabiaah Probably due to RTL not being enabled in your app with I18nManager.forceRTL, see https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps. I'm locking this conversation, don't hesitate to continue the discussion on Discord :-)