Posted in React Native

border top/left/bottom/right width not working

   July 22, 2020  7 Comments on border top/left/bottom/right width not working

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:

screen shot 2015-02-02 at 9 43 33 am

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:

screen shot 2015-02-02 at 9 43 40 am

Full dicussion on github.com

7 thoughts on “border top/left/bottom/right width not working”

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

  4. There is no pain guys – all will work with <View> wrapping any <Text>, <TextInput>, <Touchable...>

  5. <View> wrapping is painful. It makes styling a pain. Especially with error states. 1 field = 4 independent styles.

Comments are closed.

 Posted in React Native Issues

border top/left/bottom/right width not working

   March 25, 2020  3 Comments on border top/left/bottom/right width not working

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:

screen shot 2015-02-02 at 9 43 33 am

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:

screen shot 2015-02-02 at 9 43 40 am

Full dicussion on github.com

3 thoughts on “border top/left/bottom/right width not working”

  1. <View> wrapping is painful. It makes styling a pain. Especially with error states. 1 field = 4 independent styles.

Comments are closed.