'Letter spacing on React Native - Android
I'm using React Native 0.29 with Android emulator (API Level 23). I am trying to achieve letterSpacing on Text component. But it seems not working on Android. Official documentation says that it only works in iOS. Is there any workaround of this problem?
Solution 1:[1]
The lack of letter spacing on Android can be "solved" by adding one or more spaces between each character. I have found the unicode HAIR_SPACE U+200A to give the best results, but you might have to experiment to find what suits best for your font. For example 2 hair spaces or one U+2009 THIN SPACE.
function applyLetterSpacing(string, count = 1) {
return string.split('').join('\u200A'.repeat(count));
}
It probably works best for headers and menu labels.
Unicode spaces: https://www.cs.tut.fi/~jkorpela/chars/spaces.html
Solution 2:[2]
you can give space between letter using default props of Text component.Like
<Text style={{ fontSize: 18, letterSpacing: 3, color: '#FFFFFF' }}>Stack Overflow</Text>
Solution 3:[3]
Looks like as of React Native 0.30 letterSpacing is iOS only as well. You could always add this and issue a pull request :)
Another option might be to hack together a function that takes a string and adds spacing around each letter. (it would be a hack though!)
Solution 4:[4]
Update React Native to at least version 0.55 for letter spacing on Android to work.
Solution 5:[5]
letter Spacing prop of text would help in giving space between letters in a word. The code is as as follows
<Text style={{ letterSpacing: 3 }}>Your Text</Text>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | hanse |
| Solution 2 | Menon Hasan |
| Solution 3 | carla |
| Solution 4 | Christopher Regner |
| Solution 5 | Tathya Kapadia |
