I would like to add a band of grey in the midddle of my white background. Here is the issue : I can't write anything inside of it. Here is my code : container: { flex: 1, justifyContent: "center", marginTop: 12, flexDirection: "column", }, upperContainer: { flex: 1, backgroundColor: "#fff", }, lowerContainer: { flex: 1, top: 1400, backgroundColor: "#F7F7F7", }
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
<View style={styles.container}>
<View style={styles.upperContainer}>
...
<View style={styles.lowerContainer}>
...
I'm not sure what you're going for with the ScrollView, but here's one way to do it on a static background:
<View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center' }}>
<View style={{ backgroundColor: '#bbb', width: '100%', paddingVertical: 12 }}>
<Text style={{ textAlign: 'center' }}>
Gray Stripe Text
</Text>
</View>
</View >
Keys are:
You could probably also do the gray background without the inner View, by adding background color straight to the Text.