border top/left/bottom/right width not working

[jlongster]

I have this in my render method:

 return View(
 { style: { flex: 1 } },
 TouchableWithoutFeedback(
 { onPress: this.handlePress },
 View({
 style: {
 flex: 0,
 backgroundColor: 'gray',
 height: 50,
 alignItems: 'center',
 justifyContent: 'center',
 borderWidth: 1,
 borderColor: 'white'
 },
 }, Text({ style: { color: 'white' }}, "^"))
 ),
 TouchableWithoutFeedback(
 { onPress: this.handlePress },
 View({
 style: {
 flex: 0,
 backgroundColor: 'gray',
 height: 50,
 alignItems: 'center',
 justifyContent: 'center'
 },
 }, Text({ style: { color: 'white' }}, "v"))
 )
 )

It renders this:

But if I change the borderWidth in the first component to borderBottomWidth or any of the other top/left/bottom/right methods, there is no border. There should be a white border on one side of the component:

[vjeux]

Yup, you noticed! So, the story here is that borders on only one side are not natively supported by iOS, we did some bad hacks in our fb codebase to support it.

We want to rewrite it cleanly in OSS. Make sure it supports borderRadius, and does the same diagonal appearance when there are two adjacent borders with a different color/size.

[vjeux]

Should be working now

[janmonschke]

It's not yet working for me (on 0.4.0)

[janmonschke]

Argh, nevermind, Apparently it is not activated for <Text /> nodes and I'm now wrapping a <View /> around them.

[axelg12]

Can confirm that this works in 0.8.0 for <View />

But is there a reason why it doesn't support <Text />?

[mikefrancis]

+1 for <Text /> support

[JeanLebrument]

👍 I need this for <TextInput />

[ilansas]

+1 for <TextInput />

[elisei-timofte]

+1 for <Text />

[AlexGustafsson]

Any news on support for <Text />?

[chinloongtan]

+1 for <TextInput /> as well

[vjeux]

Can you add it to https://productpains.com/product/react-native/ so that we can figure out prioritization?