React-native-render-html: Support cascading styles

[psegalen]

Hello, I haven't found anywhere any pointer about this particular issue yet: in the HTML code I receive from the server I sometimes have things like that <i><strong>Text</strong></i>
Problem, I have a custom font throughout the app and I haven't found a way yet through tagsStyles to specify a thing like:

i: {
  strong: {
    fontFamily: "MyFont-BoldItalic"
  }
}

Is it event possible?

[jsamr]

@psegalen Not at the moment! Cascading styles are complex and not yet supported. It could be a feature of a future release though! With the foundry refactor, that might be more feasible.

[psegalen]

Thanks for the quick answer!
Since you flagged it as a feature request, I'll let this issue open.

[jsamr]

@psegalen If you don't want to specify the font style with the name, and instead use fontFamily: MyFont, check out how to achieve that on android here by declaring a font.xml in your res folder: https://github.com/facebook/react-native/pull/23865
For iOS, I don't remember how to achieve the same result be I remember I did in a past project. Be careful though not to hit this bug https://github.com/facebook/react-native/issues/20398

[psegalen]

Thanks a lot @jsamr, I'll dig into it!

[psegalen]

Thanks again @jsamr, with a little more work it solves my problem!
For the record: I haven't found a way to use this font.xml file on Android from React Native so I ended up overriding the default font for my app.
Also, on iOS it just works out-of-the-box: I just referenced "FontName-Regular" on my HTML body (that I dynamically add if there is none) and the system chooses the right variant (between regular, bold, italic and bold-italic) correctly for each style.

Basically, the problem was coming from the fact that Android did not support applying fontWeight: "bold" and fontStyle: "italic" to my font (it was falling back to Roboto) while iOS did. @jsamr's first link lead me to fix it, thanks again!

[psegalen]

Okay, it worked until it was deployed on the store beta program... :'(
I had to scratch my head until I searched inside react-native source code and PRs and finally found what I needed: the ReactFontManager class!
I reverted the default font override and just added ReactFontManager.getInstance().addCustomFont(this, "Srisakdi", R.font.srisakdi); in my app's onCreate!

[jsamr]

Tracking this library as candidate to build the feature https://github.com/fb55/css-select