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

Answer 1

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 }) => (
  
    

    
      {content}
    
  
);

The outerWrapper applies the orange background color at the top. The first 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.