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

@react-navigation^v6.x you need to add tabBarStyle: { backgroundColor: 'red'} in the screenOptions prop.

For example:

<Tab.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#141E30',
        },
        headerTintColor: '#BBC8D6',
        headerBackTitleVisible: false,
        headerTitleStyle: {color: '#BBC8D6'},
        tabBarShowLabel: false,
        tabBarStyle: {
          backgroundColor: '#141E30',
        },
      }}>
      <Tab.Screen
        options={{
          tabBarIcon: () => (
            <Icon
              name="th-list"
              size={25}
              color="#BBC8D6"
              style={{paddingVertical: 10}}
            />
          ),
          title: 'ToDos',
          // tabBarBadge: 3,
        }}
        name={HOME}
        component={HomeScreen}
      />
      <Tab.Screen
        options={{
          tabBarIcon: () => (
            <Icon
              name="image"
              size={25}
              color="#BBC8D6"
              style={{paddingVertical: 10}}
            />
          ),
          title: 'Floor Plan',
        }}
        name={FLOOR_PLAN}
        component={FloorPlanScreen}
      />
      <Tab.Screen
        options={{
          tabBarIcon: () => (
            <Icon
              name="user-circle-o"
              size={25}
              color="#BBC8D6"
              style={{paddingVertical: 10}}
            />
          ),
          title: 'Profile',
        }}
        name={PROFILE}
        component={ProfileScreen}
      />
    </Tab.Navigator>

Answer 2

screenOptions={({route}) => ({
    tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
    tabBarLabelStyle: {
      fontWeight: '600',
      fontSize: 12,
    },
    tabBarActiveTintColor: '#f1c522',
    tabBarInactiveTintColor: '#f4f1de',
    tabBarActiveBackgroundColor: '#436332',
    tabBarInactiveBackgroundColor: '#436332',
  })}

Answer 3

I just set backgroundColor

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

Answer 4

I found a option (I don't like but it work) in this answer: How do you make the react-native react-navigation tab bar transparent

<Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        activeTintColor: theme.primary,
        inactiveTintColor: theme.tintInactiveTabBar,
        style: {
          backgroundColor: theme.backgroundTabBar,
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          borderTopRightRadius: 10,
          borderTopLeftRadius: 10,
        },
      }}>...</Tab.Navigator>

Put position: absolute and bottom, left and right attributes. It works for me.