'React Native : Add a band of color in the background

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}>
...
javascriptcssreactjsreact-nativebackground-color


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abe

Related Questions