
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 besplit
into letters.spacing
to pass through to theLetter
components (unless it is the last letter, then we always pass0
to prevent any underlines from going too far).textStyle
to pass through to ourLetter
component.viewStyle
to style up theView
that wraps theLetter
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!
