logo-new mail facebook Dribble Social Icon Linkedin Social Icon Twitter Social Icon Github Social Icon Instagram Social Icon Arrow_element diagonal-decor rectangle-decor search arrow circle-flat
Close

DevMynd
Welcome to Tandem. We were formerly known as DevMynd. Read more about our new identity.

letter buttons
Development
July 13, 2017

Cross Platform Letter Spacing For React Native

Sr Software Consultant

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.

https://gist.github.com/crismali/02c182e185f52aa6e6fafc16598e4dac

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.

https://gist.github.com/crismali/c305a5ffcdcabefd3b6f0bdb6759f0f2

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

https://gist.github.com/crismali/f0f1ccbb9b39eec4b9a34541260ddbec

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!

Let’s do something great together

We do our best work in close collaboration with our clients. Let’s find some time for you to chat with a member of our team.

Contact Us