DEPRECATED

React native has an issue on Android that causes the Text component to render with the wrong line height.

In case you still want to use this:

• Go through the issue and see if it affects you. There's a workaround that might work for you.
• Keep an eye on this PR from Capsize's official repo.

React Native Capsize

A port of Capsize for React Native

From Capsize's README

Capsize makes the sizing and layout of text as predictable as every other element on the screen.

Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.

Installation

yarn add react-native-capsize

or

npm install react-native-capsize

Usage

import capsize from 'react-native-capsize'

const fontMetrics = {
  capHeight: 1456,
  ascent: 1900,
  descent: -500,
  lineGap: 0,
  unitsPerEm: 2048,
}

const styles = capsize({
  fontMetrics,
  capHeight: 48,
  lineGap: 24,
})

function App() {
  return <Text style={styles}>Hello</Text>
}

Where do I get the font metrics?

From Capsize's Documentation

This metadata is extracted from the metrics tables inside the font itself. You can use the Capsize website to find these by selecting a font and referencing JavaScript tab in step 3.

For more please visit Capsize's Documentation

Example

To run the example project, follow these steps:

• Clone the repo
• Run these commands

yarn
cd example
yarn && yarn start