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:
It’s not yet working for me (on 0.4.0)
Argh, nevermind, Apparently it is not activated for
<Text />nodes and I’m now wrapping a<View />around them.<TextInput />There is no pain guys – all will work with
<View>wrapping any<Text>, <TextInput>, <Touchable...><View>wrapping is painful. It makes styling a pain. Especially with error states. 1 field = 4 independent styles.+1 for
Text