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.

This post was published a week ago on React Native School. Be sure to visit for the latest tips, tricks and tutorials on React Native!

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.

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

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

Comments

[Yongchang He]

Thank you for sharing this!