React Native: borderBottom does not show up in empty View - css

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?

Answer 1

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

Answer 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.

Answer 3

you can also try:
<View style={styles.divider}/>
divider: {
borderBottomWidth: 1,
borderBottomColor: 'white',
alignSelf:"stretch"
},
but I prefer just using width: "100%"