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

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

render = () => (
  
    
    
  
);

Result on an iPhone X: