Line Height in RN is absolute-pixel values, not ratios

[davidgovea]

Hi @TVke , hope you're well!

Discussed previously in #23 -- confirming that this is indeed an issue.

I noticed that using any lineHeight helper (e.g. t.leadingLoose) causes text to be "stacked" on each other.. almost in a single line. This is because the values of 1-2 are used as pixel values in react-native, not fontSize-ratios as in web.

I observed the behavior on both iOS and Android.

---

In issue #23, @apostopher ended up using a "styled-components" style approach.. putting the calculation inside a text component.

I've fashioned myself a few helper functions to continue the "inline styles" approach of tailwind.

This is the essence of what I'm using locally:

const createLineHeight = ({ lineHeight }) => ({ fontSize }) => ({ lineHeight: fontSize * lineHeight });

export const leadingNone = createLineHeight(t.leadingNone);
export const leadingTight = createLineHeight(t.leadingTight);
export const leadingSnug = createLineHeight(t.leadingSnug);
export const leadingNormal = createLineHeight(t.leadingNormal);
export const leadingRelaxed = createLineHeight(t.leadingRelaxed);
export const leadingLoose = createLineHeight(t.leadingLoose);

import { leadingRelaxed } from 'line-height-helpers'

<Text style={[t.fontSm, leadingRelaxed(t.fontSm)]} />

Using this has been pretty ergonomic.

---

I'm thinking I'd like to see the lineHeight-as-functions approach in react-native-tailwindcss. It's unfortunate to introduce a new syntax, but we've got to work with the RN environment, right? Typescript definitions would hopefully help make it easy to use.

import { t } from 'react-native-tailwindcss'

<Text style={[t.fontSm, t.leadingRelaxed(t.fontSm)]} />

Thoughts? Maybe instead of overloading tailwind values, we introduce a new module? (i.e. import { t, utils } from 'react-native-tailwindcss')

[TVke]

Hey @davidgovea

Great breakdown of the problem. As I mentioned in the issue, I had a hard time understanding line height in react-native. I like the method approach and would love to see that. I think util would be a good extra functional section also great for the possible responsive methods.

Greetings Thomas

[davidgovea]

Awesome, will whip something up

[Laruxo]

This is quite an old issue, but I had encountered it today while migrating a small app to Tailwind. For me the simplest (and most intuitive) solution was to add this line to my tailwind.config.js:

theme: {
    lineHeight: (theme) => ({
      ...theme("spacing"),
    }),
    ...
}

After doing this, I also encountered another problem - by default, not all of the spacings defined in default config are used.

@TVke what do you think about changing the default config to include all spacings and use them for lineHeight?

[TVke]

Hi

I think this can be done but this is a breaking change so maybe for now set it manually.