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

Line Height Not Respected in iOS #25

Open
justinwaite opened this issue Mar 27, 2018 · 7 comments
Open

Line Height Not Respected in iOS #25

justinwaite opened this issue Mar 27, 2018 · 7 comments

Comments

@justinwaite
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

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

@justinwaite
Copy link
Author

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
Copy link

Ragnar-H commented Apr 5, 2018

@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
Copy link

stigi commented Apr 19, 2018

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

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

No branches or pull requests

4 participants