react-native-render-html

react-native-render-html copied to clipboard

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

I have html that I cannot change and try to set different fonts for children tags but cannot to do it while parent tag has own font <p><a style="color: #2f74eb" href="#somelink" data-label="Lucky Bassi">Link info</a> why didn’t you take Giraffe 🦒 </p>

React Native Information

"react-native": "0.70.8",
"react": "18.1.0",
"expo": "~47.0.14",

RNRH Version

"react-native-render-html": "^6.3.4",

Tested Platforms

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

Reproduction Platforms

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

Minimal, Reproducible Example

const tagsStyles = React.useMemo(
    () => ({
      em: {
        fontSize: 20,
        fontFamily: Fonts.manropeItalic, //doesn't work because p has other font 
        fontStyle: 'italic',
        fontWeight:'800',
      },
      body: {
        opacity: isOpacity ? 0.75 : 1,
        lineHeight: normalize(24),
      },
      a: {
        fontFamily: Fonts.manropeItalic,
        textDecorationLine: 'none'

      },
      p: {
        fontFamily: Fonts.manropeMedium,
        fontSize: normalize(14),
        color: '#16243D',
        padding: 0,
        marginVertical: 0
      },
      strong: {
        fontFamily: Fonts.manropeBold,
        fontSize: normalize(14),
        color: '#16243D'
      },
      ul: {
        padding: 0,
        paddingLeft: 8
      },
      li: {
        padding: 0,
      }
    }),
    [isOpacity],
  );

  return (
   <RenderHtml
      contentWidth={width - 32}
      systemFonts={systemFonts}
      source={'<p><a style="color: #2f74eb"  href="#somelink" data-label="Lucky Bassi">Link info</a> why didn’t you take Giraffe 🦒 </p>'}
      tagsStyles={tagsStyles}
      renderersProps={renderersProps}
    />
  )

Additional Notes

No response

If only reproducible on iOS, likely a problem with React Native rather than this library. Have you tried to nest Text with different font families in vanilla React Native?