Line Height Not Respected in iOS

Hello! First off, thanks for the library! It has been very useful thus far. One thing I seem to be struggling with is that while I am trying to style a paragraph’s lineHeight, iOS seems to ignore this property while Android is respecting it.

...
<MarkdownView style={styles.markdownContainer} styles={styles.markdown}>
  {markdown}
</MarkdownView>
...

const styles = {
  ...
  markdown: {
    paragraph: {
      lineHeight: 28, // Respected in Android, not iOS
    }
  }
  ...
}

Any thoughts?

[Ragnar-H]

@Benjamin-Dobell I’ve got an expo snack reproducing the issue here https://snack.expo.io/@ragnar/https:-github.com-benjamin-dobell-react-native-markdown-view-issues-25

Try running it on Android and iOS to see the difference.

The issue seems to be that lineHeight is not propagated from a parent Text to child Text components. I’ve inspected the output of a paragraph render with react-devtools, which is:

<Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 16, lineHeight: 55 }}> <--`paragraph` styling
  <Text>This is the rendered text</Text> <---non existent `text` styling
  <Text>Some styles are passed by the parent</Text>
  <Text>lineHeight on iOS is not one of them :(</Text>
  <Text>and these Text components use `textContentRenderer('text')`</Text>
</Text>

I tried removing this line locally, which seems to fix the issue. But I’m not sure what side effects will come from removing it.

[stigi]

@Ragnar-H is right. Instead of removing the line he mentioned it is enough to pass rules={{text:{render:undefined}}} in the MarkdownView props.