meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

other fonts don't work for children tags if you set font for parent #642

Open AMTrityak opened 1 year ago

AMTrityak commented 1 year ago

Decision Table

Good Faith Declaration

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

Reproduction Platforms

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

jsamr commented 1 year ago

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?