A quick look at react-native-typography

This post is more of a Public Service Announcement. If you are pressed on time, the take-away of this post is: try out react-native-typography.

The Text component

The built-in Text component is one of those deceptively simple aspects of React Native. It seemingly provides the same result on both platforms and thus, you do not give a second thought.

However, when customised or combined with external fonts, the Text component begins to show some quirky behaviour that can lead to unexpected results.

A full account of these quirks, complete with comparative screenshots, has been published by Martin Adamko in his post React Native Quirks.

Martin’s excellent article provides workarounds per case but a better alternative has since emerged, namely react-native-typography.

React-native-typography

Built by Hector Garcia, react-native-typography is a package that provides a set of text styles and helpers that provide great rendering on iOS, Android and the web.

Starting with react-native-typography is simple.

yarn add react-native-typography

The package provides a series of predefined collections that match the native design systems for both iOS and Android and which can be used as drop-in replacements for the textStyle attribute.

import { material } from 'react-native-typography';

<Text style={material.display4}>Hello Material!</Text>

If you are not wholly satisfied, there is always the option of extending or even overriding the built-in styles.

import { material } from 'react-native-typography';

<Text style={[material.display1, {color: 'green', padding: 10]}>
 Hello Green and Padded Material!
</Text>

If you’re like me and prefer to work with styled-components, react-native-typography provides a solution for that as well. By default, the styles are imported as StyleSheets but you can also import them as plain objects.

import { material } from 'react-native-typography';
import styled from 'styled-components/native';
const TitleText = styled.Text`
  ${material.title1Object}; // Append Object to the style name
   color: gainsboro;
`
<TitleText>
 Hello Styled Material!
</TitleText>

And there you have it. A simple way to maintain clean and consistent typography in React Native.