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 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 (
  
    
      {...navBarComponentStuff}
    
  )

For the Navigation Bar

And this for the Tab Bar:

 //Some dark grey color is passed here
  
    {tabBarItems.map(render tabs.....}
  
}

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 (
  
    
      
    
    
      
        
          {map and render tabs}
        
      
    
  
);

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.