How to handle the SafeArea's background color with Bottom Tab Navigation?

Question

Current Behavior

Hi everyone,

I want to set the background color for the Bottom Tab. So I did as below.

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

The problem is the SafeArea has a white background

Expected Behavior

What I expect is

So could you tell me how to solve this issue in React Navigation version 5 please? Thank you!

Your Environment

iOS react-native: 0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/bottom-tabs: ^5.0.5

Answer 1

I just set backgroundColor

<Tab.Navigator
    initialRouteName="Stack_Main"
    tabBarOptions={{
      style: {
        backgroundColor: "#FF0000",
      },
    }}
  >