emotion/native's css method does not work for border-bottom.

[tian-yi]

Current behavior:

<TextInput style={css`border-bottom: 1px solid gold;`} />

This does not apply any styles to the TextInput's bottom border. This does not work for other specific sides either like border-top, left or right

This works though:

<TextInput style={css` border-bottom-color: red; border-bottom-width: 1px;`} />

Using just border also works.

<TextInput style={css`border: 1px solid gold;`} />

Tested on the following versions of react, react-native, emotion and emotion/native

• react version: 16.8, 16.9
• react-native version: 0.59.8
• emotion/core version: 10.0.14, 10.0.17
• emotion/native version: 10.0.14

[Andarist]

Could you prepare a repository with the issue reproduced?

[tian-yi]

Sure, Here we go

https://github.com/tian-yi/emotion-native-bug-report

[Andarist]

Please report this to https://github.com/styled-components/css-to-react-native , seems like they miss transform for those css properties and we are using this package to do the parsing.

EDIT: there is actually open PR for this - styled-components/css-to-react-native#95 , you can checkout the discussion there

[tian-yi]

Interesting, I understand the reason now why it's not working. But I wonder maybe somehow we can improve the documentation to reflect this.

[tian-yi]

So since this is not an emotion/native issue, I will close this. Thanks for your help @Andarist