0

Concerning the use of react-native-render-html@4.2.1

Using a custom renderer for h1, I am setting the styles of a returned react native Text element. In the iOS inspector you can see that the styles are indeed there but the fontSize does not seem to be respected. Moreover, after testing more elements aside from the headers shown, none of them seem to adhere to the prescribed fontSize.

HTML passed is:

<h1>Header</h1>
<h2>Header</h2>
<h3>Header</h3>
...

renderer for h1:

const styles = StyleSheet.create({
  h1: {
    fontSize: 300, // exaggerated for example
    lineHeight: 34,
  }
});

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

// consuming component
<HTML
  html={html}
  renderers={renderers}
/>

Inspection result:

enter image description here

jDesign
  • 28
  • 5

2 Answers2

0

I missed the tagStyles attribute for the HTML container. However, it would be interesting to know why I am seeing what I am seeing.

jDesign
  • 28
  • 5
0

There is an issue in your code! The reason why you are not passing styles.h1 as you think is that styles is defined twice, line 1 and line 8. The second definition being in the function scope, it overrides the first definition.

Jules Sam. Randolph
  • 3,610
  • 2
  • 31
  • 50