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.

Dogmatic

Any luck coming up with a solution for this? – Geisler

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>
  );
}

Keramic

This solution is by far the best, it should be the recognized answer to this question. – Rounders

What is the role of flex: 0 in the first safeareaview? – Monandrous

You can short syntax Fragment component with empty tags: <></> – Kalin

This example looks to not be working anymore. The gray part is now just below the red one, then the white content. – Sergeant

🚀 Rocket science. Thanks! – Toilette

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 ;) – Letrice

This is the greatest thing ever. I Googled this thinking like, "no way I find out how to do this", and here it is. Thank you! – Cowberry

Answer 2

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

import { SafeAreaView } from 'react-native-safe-area-context';

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

Rambutan

very nice touch – Liveryman

also has to add in App.js import {SafeAreaProvider} from 'react-native-safe-area-context'; at root – Booker

Is believe this is for "react-native-safe-area-context", not the "native" SafeAreaView? – Shoemake

@Shoemake yup! I added import statement about that. Thanks! – Rambutan

Answer 3

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,
  }
})

Si

Answer 4

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.

Kei

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 ;)

Letrice

This is it. So easy! – Whinny

Answer 6

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:

Anticathode

Answer 7

If you need different color of SafeAreaView's top or bottom bar, just cover the bar with View component (positioned absolute) and get its height from useSafeAreaInsets hook.

import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
            
<SafeAreaView style={{ flex: 1 }}>
   <View style={{ 
      position: 'absolute'
      height: useSafeAreaInsets().top, 
      backgroundColor:'red'            
    }} />
</SafeAreaView>

Disciplinarian

Answer 8

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

Gabardine

Answer 9

The only way that worked for me using expo sdk49 was:

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

Immaterial

Answer 10

For better control, just sandwich your content between two SafeAreaViews with flex-0 and the edges property:

import { SafeAreaView, View } from 'react-native';

<>
    <SafeAreaView edges={["top"]} style={{ flex: 0, backgroundColor: "#0a2352" }} />

    <View style={{ flex: 1 }} >
        ... your content ....
    </View>

    <SafeAreaView edges={["bottom"]} style={{ flex: 0, backgroundColor: "#ffffff" }} />
</>

Viperous

Answer 11

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.

Marlysmarmaduke

Answer 12

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.

Antoneantonella