React-native: Applying borderRadius to <Text> ignores backgroundColor

[albinhubsch]

Description

Applying a borderRadius to a element with a border and a backgroundColor only affects the actual border. The backgroundColor stays square. If this is intended behaviour the documentation has to be changed cause it says style applies to aswell Text Style but this behaviour does not appear to a element.

example
<Text style={{ backgroundColor: '#f008', borderWidth: 1, borderColor: '#000', borderRadius: 12, padding: 8 }}>Test text</Text>

produces

according to my expectations, backgroundColor should be rounded corners aswell?

Reproduction

Try this snippet to reproduce.
<Text style={{ backgroundColor: '#f008', borderWidth: 1, borderColor: '#000', borderRadius: 12, padding: 8 }}>Test text</Text>

Additional Information

• React Native version: 0.36
• Platform: iOS, don't know about Android
• Operating System: MacOS

[steida]

Try overflow="hidden", it should help.

[christopherdro]

@facebook-github-bot answered

[st0ffern]

Works on iOS not on Android.
Android has a issue on it here: https://github.com/facebook/react-native/issues/3198

as @christopherdro said: answered
this can be closed @albinhubsch @hramos 😉

[Gentlee]

@stoffern why this issue is closed if it is not fixed? It should work without hacks with overflow, same as for usual View. Should be reopened and fixed.

[neiker]

@hramos why this is closed? still a bug

[hramos]

See above:

Please open a new issue if this affects you.

[neiker]

I do not understand the logic behind this, a workaround not means a solved bug.

/cc @hramos

[st0ffern]

As i Wrote:

Works on iOS not on Android.
Android has a issue on it here: #3198

as @christopherdro said: answered
this can be closed @albinhubsch @hramos 😉

Please refer to the original issue #3198

[neiker]

wat

[hramos]

Please open a new issue.