Letter spacing on React Native - Android

react-native react-native-android

11668 просмотра

3 ответа

740 Репутация автора

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?

Автор: Provash Shoumma Источник Размещён: 19.07.2016 06:45

Ответы (3)


4 плюса

1422 Репутация автора

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!)

Автор: John Veldboom Размещён: 30.07.2016 08:22

25 плюса

996 Репутация автора

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

Автор: Hanse Размещён: 01.08.2016 09:29

1 плюс

146 Репутация автора

Update React Native to at least version 0.55 for letter spacing on Android to work.

Автор: Christopher Regner Размещён: 19.02.2019 07:24
Вопросы из категории :
32x32