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