React-native: [Android] TextView doesn't support letter spacing and padding

[xinthink]

1. padding of a TextView is ineffective, the dimension seems right, but the content is not placed correctly
2. the text (not the TextView) 'inherits' the background color, so it looks like there's an overlapped layer

it should look like this:

• RN v0.11.4
• Android 5.1.1

code:

    <Text style={{
        backgroundColor: 'rgba(100,230,100,.7)',
        padding: 25,
        color: 'white',
        fontWeight: 'bold',
      }}
      >
      Hello
    </Text>

[andreicoman11]

Issue 2. has been fixed in https://github.com/facebook/react-native/commit/3b6d029a55efe1ffa5afcafe60d2d2445aadd502
I think @kmagiera has more context for issue 1.

[PhilippKrone]

@kmagiera Any idea what the reason for issue 1 could be?

[kmagiera]

Have you tried this on iOS by any chance. This is related to the fact that padding is implemented in layout algorithm by shifting children of the element by the value of padding. It means that it won't work by default on non View components. It shouldn't be that difficult to implement it, so PRs are welcome!

also cc @vjeux who may know if we support this on Text elements on iOS

[PhilippKrone]

@kmagiera It is supported on Text elements. See https://facebook.github.io/react-native/docs/text.html#content: Text has all properties of View, which again has the Flexbox properties, which includes padding :) It is working in iOS. I'm currently porting my app to android and found this issue as well, thats why I was asking for a solution in here.

[kmagiera]

In that case this piece is missing on android. It shouldn't be that difficult to add. One would need to update ReactTextShafiwNode to calculate padding into the result of measure, then expose setters for padding props in ReactTextManager and forward it to the view with setPadding.

We do sth similar for EditText as far as I remember.

If this is blocking you, you may try wrapping Text component in a View with padding

[richarddewit]

Any news on this?

[patoroco]

@richarddewit we're workaround padding issue wrapping Text in a View, and applying margin to it.

Margin seems to be work for both platforms.

[satya164]

Any updates on this?

[xinthink]

Tested on RN 0.17.0, the background issue is fixed, but the padding is still ineffective.

[kkgelu]

You can't image how heart-breaking it was when I first fired up my 'fine tuned' iOS version on Android...

[liamzebedee]

Anyone against adding this to the Known Issues page?

[AlexCoderBit]

Have same issue with padding for android platform,
no problems with iOS in the same time! Any chances to get that fixed soon?

[AlexCoderBit]

The only "workaround" I found is to wrap into .

[fab1an]

I think the only backwards compatible way to get proper tracking/letter-spacing on Android is using a wrapper like this, which inserts spaces between letters: http://stackoverflow.com/questions/1640659/how-to-adjust-text-kerning-in-android-textview/16429758#16429758

Please don't abuse textScaleX for it ;)

[GantMan]

Anyone know if this is gonna happen? Padding sure would be nice.

[rburgst]

I would like to split this issue, since padding and letter spacing don't really have anything to do with each other. Padding should be easily fixable regardless of the letter spacing issue (which is much harder to fix).

[fab1an]

Actually letter-spacing could be trivially implemented with a component that splits the text by letters, creates a TextView for every letter and uses scaleX on the spaces only.

[rburgst]

Good luck implementing proper word wrapping with such an approach. At any rate, the solution for spacing will be probably quite different from the padding solution/fix.

[fab1an]

From a design point-of-view letter spacing ('tracking') is mainly used to make A L L C A P S headlines more readable.

[dbuarque]

+1

[mquandalle]

I think point 1. was fixed in c3f2bba834a5ffcc42352bb738132baceafce76d.

[maraujop]

For those interested there is a new PR that fixes letter spacing in Android https://github.com/facebook/react-native/pull/9420 /cc @rburgst

[irfanayaz89]

@patoroco @A1ex5andr @kmagiera Can any of you guys explain how to get letter spacing by wrapping text inside a view? a code snippet would be of great help. Thanks

[theodoregold]

Here is a workaround in the meanwhile.
http://stackoverflow.com/questions/38451278/letter-spacing-on-react-native-android

[dannycochran]

https://github.com/facebook/react-native/issues/3233#issuecomment-269200404 helps with letter spacing but not padding.

the workaround for putting the element inside a , and applying padding to the doesn't work if the is already nested within other elements. any chance this is something that could be fixed in Android? @andreicoman11

[jerolimov]

Checkout my PR #13199

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[zeh]

FWIW this is now being tracked as #17398 and waiting for review.