React Native : Add a band of color in the background-CodePudding

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

CodePudding user response：

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:

flex: 1 and justifyContent: 'center' in outer View
nesting elements so they are contained

You could probably also do the gray background without the inner View, by adding background color straight to the Text.