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

This post waspublished 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'sopen 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, addfontVariant: ["tabular-nums"]. This will make the text a fixed width so your layout stays fixed.

Code from theexample app:

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

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