React-native: 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]

:+1: 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?

[mhollweck]

fyi: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

[leeight]

+1

[rclai]

@ide, you guys don't have labels for these types of issues?

[akshaysmurthy]

Definitely need it for <TextInput />

[jorilallo]

+1 on <TextInput />

[kelvinlauKL]

+1 <TextInput />

[Overload119]

+1 <TextInput />, Googling brought me to this issue.

[claytongulick]

Ugh, spent hours banging my head against the wall trying to figure this out before I found this... +1 gajillion to make this work everywhere the docs say it should, like TextInput...

[keeganmccallum]

+1 for TextInput

[rclai]

Guys, make sure that you're voting it up in here: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/ instead of +1'ing.

[vjeux]

Also, this is not a controversial feature. A pull request would be much more impactful :)

[rclai]

A workaround is to wrap your TextInput or Text in a View and apply the borders on the View.

[nullicorn]

:+1: for TextInput :)

[magrinj]

:+1: TextInput :)
Up also here guys: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

[zhaotai]

Hi, although I can use <View> to wrap the <TextInput> and <Text> to support borderLeft/Right..., I still need them. I don't want to wrap too many <View>s to hack.

My react-native version is 0.24.1

[DenisIzmaylov]

It seems still doesn't working properly, have a look at the first item:

  return (
    <View style={[styles.eventInRoom, { borderLeftColor: roomColor }, styles.feedEventContainer]}>
      <View style={styles.feedEventContent}>

Which has the following styles:

  feedEventContainer: {
    margin: 10,
    marginBottom: 5,
    borderRadius: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: .3,
    shadowRadius: 1.3,
    backgroundColor: '#ffe',
  },
  eventInRoom: {
    borderLeftWidth: 3,
    borderTopWidth: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  feedEventContent: {
    padding: 10,
    flexDirection: 'row',
    borderBottomColor: '#ddd',
    borderBottomWidth: .5,
  },

[nicolasduranl]

+1 for <TextInput />, also upvoted in productpain (Y)

[arthurkushman]

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

[lukescott]

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

[grundmanise]

+1 for Textinput

[rushg]

+1 for Text

[alexhhn]

+1 for Text and TextInput

[Naoto-Ida]

+1 for what? TextInput 😙

[miggitymac]

+1 for TextInput

[tested01]

+1 TextInput

[aaroncrawford]

+1 for TextInput

[Rebsos]

+1 Text

[narayananramu]

+1 for TextInput

[rileytg]

+1 for TextInput support, sooo many views for layout already :(

[IOriens]

+1 for Text

[hfigueira]

+1 for TextInput (Pleeeeeease!)

[herarya]

+1 for TextInput, i need create text input group :(

[Chatharaju]

+1 for TextInput

[GetSource1234]

+1 for TextInput and View (RN 0.44)

[lako90]

i opened a request here https://react-native.canny.io/feature-requests/p/add-borderleft-right-top-bottomwidth-to-textinput--on-ios

please vote it =)

[markusguenther]

+1 for Text

[hramos]

There's way too many +1 comments in this thread, considering the issue was closed a long time ago. If you feel strongly about this being added to TextInput, please send a PR or upvote the entry on Canny: https://react-native.canny.io/feature-requests/p/add-borderwidth-left-right-top-bottom-to-textinput-

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.