Cross Platform Letter Spacing For React Native

letter buttons

Sometimes you’re working on a mobile app and things will just feel a little too tight. Maybe it’s the font or maybe there’s just some awkward space, but whatever the reason sometimes you just have to let the letters in your app b r  e  a   t   h   e.

Well, if you’re working with React Native you can just add some letterSpacing to your Text styles and call it a day. You can do that, but the trick is that (at the time of this writing at least) it will only work on iOS 😖. To avoid leaving all of those wonderful Android users out in the rain while a bus drives through a puddle and splashes them (this is exactly what a world without letterSpacing is like) we’ll have to get a little creative 💡.

First, let’s see just how different letterSpacing ends up being on iOS and Android (this component would boil down to something like <Text style={{letterSpacing: 5}}>Hello World</Text>).

On iOS it looks great.

On Android the same component looks not so great.

Very unfortunate 😑.

To work around this it’s really just a matter of realizing that letterSpacing is essentially just paddingRight for letters. So, let’s start with a Letter component.

Our Letter component does a few things here.

  • It accepts a spacing prop to tell it how much padding to apply.
  • A general textStyle prop to do any additional styling (fontSize, fontFamily, etc).
  • The children prop, which in this case would always be a single letter.

Now we just need a component to pull all of our letters together. For clarity and a lack of creativity, I’ve called it TextWithLetterSpacing.

This component (naturally) accepts a few things as well.

  • children which is just a string to be split into letters.
  • spacing to pass through to the Letter components (unless it is the last letter, then we always pass 0 to prevent any underlines from going too far).
  • textStyle to pass through to our Letter component.
  • viewStyle to style up the View that wraps the Letter components.

In your code this ends up looking like

Pretty straightforward, but how does it look on a device?

Well, on iOS we’re looking good.

And on Android we’re looking the same as on iOS!

Bam!🚨 🎆🚨 Now we have an excellent and consistent cross platform experience!

Hopefully in the near future letterSpacing will just work out of the box on both platforms, but until then we have a workable solution.

If you’re interested in an example application using this code, check out this repository on Github. It was made using Create React Native App so it should be pretty easy to get up and running.

Happy spacing!

Michael is a member of DevMynd’s software engineering team focusing on mobile apps and web development. He has been with the company since 2013.