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
spacingprop to tell it how much padding to apply. - A general
textStyleprop to do any additional styling (fontSize,fontFamily, etc). - The
childrenprop, 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.
childrenwhich is just a string to besplitinto letters.spacingto pass through to theLettercomponents (unless it is the last letter, then we always pass0to prevent any underlines from going too far).textStyleto pass through to ourLettercomponent.viewStyleto style up theViewthat wraps theLettercomponents.
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!
