TVke/react-native-tailwindcss

lineHeight doesn't work.

apostopher opened this issue · 5 comments

apostopher commented

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

image

Here the line-height needs to be 1.25 * fontSize

TVke commented

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 commented

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 commented

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 commented

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

  • 👍1
TVke commented

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