Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
7 of 15 tasks
AMTrityak opened this issue Sep 29, 2023 · 1 comment
Open
7 of 15 tasks
Labels
bug Crush'em all.

Comments

@AMTrityak
Copy link

AMTrityak commented Sep 29, 2023

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

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

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Reproduction Platforms

  • Android
  • 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

@AMTrityak AMTrityak added the bug Crush'em all. label Sep 29, 2023
@jsamr
Copy link
Collaborator

jsamr commented Oct 2, 2023

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Crush'em all.
Projects
None yet
Development

No branches or pull requests

2 participants