How to use lineHeight accessibly?

[DavidRieman]

Often, designers would like to control the space between wrapped lines of text. Say, to make them slightly tighter in one case. There's a great tool for that, lineHeight.

Consider the following render:

return <Text style={{ fontSize: 14, lineHeight: 17 }}>
  Hello, world! Now for a whole lot more words in order to guarantee a word-wrapping paragraph will be rendered.
</Text>;

Here's how that renders (per this sample):

However - this actually has a massive accessibility bug. One of the great ways a user in Chrome can ensure that application texts are readable to them is to go to Settings -> Appearance -> Minimum Font Size and crank it up. For example, the same application presented to a user who has ages ago set a Chrome setting to improve their reading experiences for their own vision characteristics:

Again with some words highlighted to help demonstrate the problem:

The web world has a solution for accessibly customizing lineHeight too, which is that lineHeight supports values like '130%'. Is there a way to control lineHeight accessibly in react-native-web?

[necolas]

RNWeb already supports all the values of line-height you'd expect on the web

[DavidRieman]

Aha! That's great news. I found the real problem, and it's not really a react-native-web problem.

Turns out the problem we were running into is that TypeScript just isn't letting us use the string. The types we're using are @types/react-native, so of course TextStyle defines lineHeight as lineHeight?: number; as devices don't support the string lineHeight. So for React Native Web, we'll have to either hack TextStyle typing to let us cleanly use number | string or we'll have to just convince TS to let us assign the string anyway with, for example, // @ts-ignore (comment why). I see there have definitely been other conversations about TS typing divergence and possibly other options for us to handle this, so I consider this thread closed. Thanks!