Line Height Not Respected in iOS

[justinwaite]

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?

[Benjamin-Dobell]

What version of React Native are you running?

lineHeight has had a few issues within React Native itself e.g. facebook/react-native#10712. However, they should mostly be sorted.

[justinwaite]

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 8.10.0
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: 0.54.2 => 0.54.2

[justinwaite]

I did see that issue but it seemed unrelated. I could set my lineHeight to 1000 and it would still be the same :/

[Benjamin-Dobell]

Could you please provide some sample markdown for me to reproduce the issue with?

[justinwaite]

This is the string I am using in my app.

# This is a title\r\nBut this is a paragraph. One would think that I would be able to control the height of the lines with the lineHeight style, but it appears that iOS has other plans for my line height. Android doesn't really care what I set it to. Magic? Could be.

[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.