Skip to content

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

Description

@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')

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions