React Native: borderBottom does not show up in empty View

Question

In my React Native app, I try to create a simple divider line. As stated here for example, I created an empty View and added the corresponding styling to it.

Now here's the thing: the divider line is not showing up with this code:

    <View style={styles.divider}>
      <Text></Text>
    </View>

... Stylesheet:

  divider: {
    borderBottomWidth: 1,
    borderLeftColor: 'white',
  },

But If I add some text lines, it shows up:

    <View style={styles.divider}>
      <Text>testtest</Text>
    </View>

... Stylesheet:

  divider: {
    borderBottomWidth: 1,
    borderLeftColor: 'white',
  },

Now here is the code context.

   <View style={styles.containerWholePage}>
      <View style={styles.containerUpper}>
        <Text style={styles.mainText}>Here is a sample text</Text>
      </View>

      <View style={styles.containerLower}>
        <View style={styles.containerText}>
          <Text>TEST</Text>
          <Text>Example 3</Text>
          <Text>18:00 - 20:00</Text>
        </View>
        <View style={styles.divider}>
          <Text>testtest</Text>
        </View>
        <View style={styles.containerText}>
          <Text>TEST2</Text>
          <Text>Example 3b</Text>
          <Text>18:00 - 19:00</Text>
        </View>
      </View>
    </View>

...

const styles = StyleSheet.create({
  containerWholePage: {
    alignItems: 'center',
    flex: 1,
  },
  divider: {
    borderBottomWidth: 1,
    borderBottomColor: 'white',
  },
  containerLower: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#1E2928',
    flex: 6,
    justifyContent: 'space-around',
  },
  containerText: {
    alignItems: 'center',
    backgroundColor: '#1E2928',
  },
  containerUpper: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'white',
    flex: 3,
  },
});

Maybe you have an idea how to make the bottom line appear without having to write text?

Add some `height` to your `view` with className divider – arnavpanwar99 Jun 05 '20 at 06:44 — arnavpanwar99, Jun 05 '20 at 06:44
@arnavpanwar99 Does not work >. – RuntimeError Jun 05 '20 at 06:48 — RuntimeError, Jun 05 '20 at 06:48

高鵬翔 · Accepted Answer · 2020-06-05T06:55:58.923

2

Just do like this:


<View style={styles.divider}/>
...
divider: {
    borderBottomWidth: 1,
    borderBottomColor: 'white',
    width:"100%"
},

Because the width is flexible to it's content, so if nothing in it, it doesn't have width. So that if you set the width, the View will have width setting as you want.

Code sandbox

edited Jun 05 '20 at 06:55

answered Jun 05 '20 at 06:48

高鵬翔

1,997
2
8
21

score 2 · Answer 2 · answered Jun 05 '20 at 06:50

2

Basically that should work I just tested it in sandbox and adding a

<View style={{borderBottomWidth: 1}} >
<Text></Text>
</View>

worked perfect for me.. maybe add a {" "} between the Text tags.

answered Jun 05 '20 at 06:50

yesIamFaded

1,970
2
20
45

It's seem doesn't work even I add {" "} between the Text tags ...It's shows a very little short line on sandbox... https://codesandbox.io/s/white-sun-4w4yp – 高鵬翔 Jun 05 '20 at 07:02
Yeah it is because of the way that the container is set up if u get rid of alignItems: "center" from containerLower style it works – yesIamFaded Jun 05 '20 at 07:11
I got it, because I change it by his code in first thought hope to let him fast to achieve. lol – 高鵬翔 Jun 05 '20 at 07:15
yeah I just tried it in an empty sandbox thats why it worked for me :D – yesIamFaded Jun 05 '20 at 07:18

tcanbolat · Answer 3 · 2020-10-04T19:57:50.960

1

you can also try:

    <View style={styles.divider}/>

    divider: {
    borderBottomWidth: 1,
    borderBottomColor: 'white',
    alignSelf:"stretch"
    },

but I prefer just using width: "100%"

edited Oct 04 '20 at 19:57

answered Oct 03 '20 at 19:16

tcanbolat

411
6
10

React Native: borderBottom does not show up in empty View

3 Answers3