[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 3b6d029
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.