React Native SafeAreaView background color - How to assign two different background color for top and bottom of the screen?

Question

I'm using SafeAreaView from React Native 0.50.1 and it's working pretty good except for the one part. I assigned the orange background color to the SafrAreaView but can't figure out to change the bottom unsafe area background to black.

Here is the code and I included expected the result and actual result. What is the best way to make the bottom part of the screen black instead of orange?

import {
  ...
  SafeAreaView
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  }
})

I want to have orange top and black bottom.

But below is what I get now.

Answer 1

I was able to solve this using a version of Yoshiki's and Zach Schneider's answers. Notice how you set the top SafeAreaView's flex:0 so it doesn't expand.

render() {
  return (
    <Fragment>
      <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
      <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </SafeAreaView>
    </Fragment>
  );
}

Answer 2

I was able to solve this by using some absolute position hacking. See the following tweak. Not future proof by any means, but it solves the problem I had.

import {
  ...
  SafeAreaView,
  View
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
        <View style={styles.fixBackground} />
      </SafeAreaView>
    )
  }
}
const styles = StyleSheet.create({
  ...,
  safeArea: {
    flex: 1,
    backgroundColor: '#FF5236'
  },
  fixBackground: {
    backgroundColor: 'orange',
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    height: 100,
    zIndex: -1000,
  }
})

Answer 3

I ran into the same problem and was able to solve with the following:

const styles = StyleSheet.create({
  outerWrapper: {
    backgroundColor: 'orange',
  },
  innerWrapper: {
    backgroundColor: 'black',
  },
});

// snip

const MyComponent = ({ content }) => (
  <View style={styles.outerWrapper}>
    <SafeAreaView />

    <SafeAreaView style={styles.innerWrapper}>
      {content}
    </SafeAreaView>
  </View>
);

The outerWrapper applies the orange background color at the top. The first <SafeAreaView /> pushes the second one down so that it starts at the beginning of the "safe area" (below the status bar). Then the second SafeAreaView takes up the rest of the screen (including the bottom "unsafe" area) and gives it the black background color.

Answer 4

You can return multiple SafeAreaViews from your render method using Fragment, each of which independently specify their backgroundColor:

render = () => (
  <Fragment>
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "red" }} />
    <SafeAreaView style={{ flex: 0.5, backgroundColor: "blue" }} />
  </Fragment>
);

Result on an iPhone X:

Answer 5

SOLUTION : I ran into this problem but I don't understand the struggle you guys had to solve it. The app is in a container that takes all the screen. SafeAreaView will wrap the app into a new smaller container. So add the style into the main container so you can have the background you want. As easy as that :

<View style={{flex:1, backgroundColor: "black"}}>
  <SafeAreaView style={{flex:1, backgroundColor: "white"}}>
    <App />
  </SafeAreaView>
</View>

That's all, hope it helps some of you ;)

Answer 6

In 2022, I am able to solve this by using edge prop of SafeAreaView!

<>
<SafeAreaView
   edges={["top"]}
   style={{ flex: 0, backgroundColor: "#0a2352" }}
/>
<SafeAreaView
   edges={["left", "right", "bottom"]}
   style={{
     flex: 1,
     backgroundColor: "#fff",
     position: "relative",
   }}
>
...
</SafeAreaView>
</>

Answer 7

<Fragment> not work correctly on any Android devices, so to solve the issue, i try this solution and it work on both android and ios:

<SafeAreaView style={{ flex:1, backgroundColor: 'red' }}>
 <View style={{ flex: 1, backgroundColor: 'green' }} >
 <Text>Hello</Text>
 </View>
</SafeAreaView>

Answer 8

I just ran into the same problem, we have a navigation bar at the top and a tab bar at the bottom with two different background colors.

My solution was to wrap the tab bar component in a SafeAreaView with the correct background color, along with wrapping the navigation bar component with its own SafeAreaView with its background color.

return (
  <SafeAreaView style={{ backgroundColor: 'white' }}>
    <Animated.View style={heightAnim}>
      {...navBarComponentStuff}
    </Animated.View>
  </SafeAreaView>)

For the Navigation Bar

And this for the Tab Bar:

<SafeAreaView style={this.props.tabBarStyle}> //Some dark grey color is passed here
  <Animated.View style={heightAnim}>
    {tabBarItems.map(render tabs.....}
  </Animated.View>
</SafeAreaView>}

So, that being said, you could wrap your navigation component in a SafeAreaView with the orange color set in style, and wrap your main content in another SafeAreaView with black as the backgroundColor style, or whatever color you have chosen.

One thing you should know, if you add two SafeAreaView's in the same component like:

return (
  <View style={styles.container}>
    <SafeAreaView style={{ backgroundColor: 'white' }}>
      <NavigationBarComponent />
    </SafeAreaView>
    <SafeAreaView style={this.props.tabBarStyle}>
      <Animated.View style={heightAnim}>
        <Animated.View style={[styles.tabBar, this.props.tabBarStyle]}>
          {map and render tabs}
        </Animated.View>
      </Animated.View>
    </SafeAreaView>
  </View>
);

It will combine the two SafeAreaView's, or at least thats what it looked like to me, maybe somebody with more experience with this can explain what happens in this situation.

This pushed my tab bar to the top of the screen and set the background color to white when I did this.

But moving the top SafeAreaVeiw into the NavigationBarComponent gave me the desired effect.

For those who may be interested, and maybe this is the reason why it acted funky with two of them in the same view, the AnimatedView's are because we sometimes hide the nav and tab bars.

Answer 9

I was able to achieve this by the code below,

<View style={{
    flex: 1
}}>
  <SafeAreaView style={{
    flex: 0,
    backgroundColor: 'red'
  }}>
  </SafeAreaView>
  <View style={{
      flex: 1,
      top: 0,
      backgroundColor: 'white'
   }}>
  </View></View>

Thanks for @Daniel M, inspired by his answer.