lineHeight doesn't work.

[apostopher]

in react-native the line-height needs to be an absolute value right?

Here the line-height needs to be 1.25 * fontSize

[TVke]

Hi @apostopher

Have you tested the outputted values in react-native? If there is something wrong happening I would love a PR for that. I know I struggled with the line height values so there is a possibility I did something wrong.

greetings Thomas

[apostopher]

Hello @TVke Thanks for getting back. First of all, thanks for this awesome lib! I'm using it in my projects and it works great!

I'm using react-native 0.61. The workaround I have in my code is a custom Text component. something like:

<Text as="h1" leading="tight">Heading 1</Text>

inside the text component, I'm calculating the lineHeight based on the fontSize. {lineHeight: fontSize * lineHeight}

react-native needs an absolute point value. on the web, we can specify line-height as a multiplier. but not in react-native :-(

[TVke]

Hi @apostopher

I have not needed to change lineHeight all that much, so I have only limited experience with it. In react-native-tailwincss I just pass the lineHeight values to the lineHeight prop so you can change your config file and that should work (if it does not work, let me know which values you have set). If you think the defaults settings need changing, I am all ears.

greetings Thomas

[inspire22]

I noticed the same problem. For some reason it is outputting "2px" instead of "2em" for leadingLoose - I realize "em" aren't supported by react so maybe that's why.

Edit: Aah, or maybe it's outputting "2" as expected and the react-native browser testing conversion stuff is making that 2px instead of 200%.

[TVke]

I think we found the problem in the last comment so closing this. Feel free to reopen or create a new one if there is still a problem related to react-native-tailwindcss