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: facebook/react-native#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 facebook/react-native#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

[jsamr]

CSS sheets will never be supported per se, because parsing requires creating a syntax tree, which requires a third party library and would most certainly add a lot of overhead.

However, I opened a feature request in our new Canny to convert CSS stylesheets to react-native-render-html compatible code. You can upvote this feature here.. Closing now as feature requests are now handled in this Canny!

[jsamr]

To use XML Fonts, check out this guide: https://stackoverflow.com/a/70247374/2779871

[vishva-shukla]

How to do it with expo?

[7ammer]

@vishva-shukla, For android you can use this package: https://github.com/Armster15/expo-xml-font
I'm unable to get font families working on iOS though :(

Any ideas?