Updated June 28, 2022

Fixed Width Text in React Native

Despite working on React Native daily for 7 years, I'm still constantly learning new things about it. Recently it was the fontVariant style prop on a Text component.

I was working a multi-theme stop watch app in React Native (it's open source!) and ran into an issue where the width of each number was different.

Normally this is not a problem but when you are changing the numbers every millisecond it looks quite hectic.

Demo of Problem

To fix this is a simple one liner:

When styling the text, add fontVariant: ["tabular-nums"]. This will make the text a fixed width so your layout stays fixed.

Code from the example app:

// ...

const styles = StyleSheet.create({
  // ...
  timeText: {
    fontSize: 60,
    fontWeight: "300",
    marginTop: 100,
    fontVariant: ["tabular-nums"], // fixed width character

export default StopWatch
Demo of Solution

MDN has a good resource through which you can learn more about the font-variant CSS property.

React Native School Logo

React Native School

Want to further level up as a React Native developer? Join React Native School! You'll get access to all of our courses and our private Slack community.

Learn More