react-nativereact-native-render-html

Default font size for all text in react-native-render-html

react-native-render-html@6.3.4

Is there a way to force all text that gets rendered in any element to have a default font size?

I am displaying HTML from a web editor and don't have control over how the HTML is rendered. For instance, the text can be in a div, span, or nested inside a span and a b tag.

<div>
    <div>text in div</div>
    <span>text in span</span>
    <span><b>text in bold</b></span>
</div>

I know you can use renders like this, but I cannot do this with all divs.

const renderers = {
  h1: (html, children, styles, {key}) => <Text key={key} style={styles.h1}>{children}</Text>,
};

<HTML
  html={html}
  renderers={renderers}
/>
Solution

  • Try the below solution:

    const defaultTextProps = {
   style: {
    fontSize: 16, // Your default font size
   },
 };


<HTML
   html={htmlContent}
   defaultTextProps={defaultTextProps} //Apply default styles to all text elements
/>