'How to set the background color of Tab.Navigator?

As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image.

The inactiveColor and activeColor are working (white and red respectively).

<NavigationContainer>

  <Tab.Navigator
    initialRouteName="HomeScreen"
    activeColor="red"
    inactiveColor="white"
    activeBackgroundColor="green"
    inactiveBackgroundColor="green"
    style={{ backgroundColor: 'green' }}
    tabBarOptions={{
      style:{
        backgroundColor: 'green'
      }
    }}
  >

    <Tab.Screen
      name="HomeScreen"
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    >
    {props => <HomeScreen {...props} state={this.state} />}
    </Tab.Screen>

    <Tab.Screen
      name="Files"
      component={FilesScreen}
      options={{
        tabBarLabel: 'Files',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="file" color={color} size={26} />
        ),
      }}
    />

  </Tab.Navigator>

</NavigationContainer>

package.json

"dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
  "@react-navigation/material-bottom-tabs": "^5.1.7",
  "@react-navigation/native": "^5.1.4",
}

Solution 1:^[1]

Refer documentation here, You need to use barStyle.

Try

<Tab.Navigator
        initialRouteName="Feed"
        shifting={true}
        labeled={false}
        sceneAnimationEnabled={false}
        activeColor="#00aea2"
        inactiveColor="#95a5a6"
        barStyle={{ backgroundColor: '#ffff' }}

Solution 2:^[2]

in the react-navigation V5 your can to do this:

 <Tab.Navigator
    initialRouteName={'Critic'}
    tabBarOptions={{
       activeTintColor: '#fff',
       inactiveTintColor: 'lightgray',
       activeBackgroundColor: '#c4461c',
       inactiveBackgroundColor: '#b55031',
           style: {
                 backgroundColor: '#CE4418',
                 paddingBottom: 3
           }
    }}
>
    <Tab.Screen name="Critic" component={Critic} options={CriticOptions} />
    <Tab.Screen name="Urgent" component={Urgent} options={UrgentOptions} />
    <Tab.Screen name="Moderate" component={Moderate} options={ModerateOptions} />
    <Tab.Screen name="All" component={All} options={AllOptions} />
 </Tab.Navigator>
);

Solution 3:^[3]

You need to add the backgroundColor in screenOptions. https://reactnavigation.org/docs/bottom-tab-navigator/#screenoptions Try this:

<Tab.Navigator screenOptions={{
    tabBarOptions: {
        style: {
            backgroundColor: '#f9f9f9',
        },
    },
}}>

Solution 4:^[4]

In React Navigation 6.x, you use tabBarStyle

<Tab.Navigator
  screenOptions={({ route }) => ({
    headerShown: false,
    tabBarStyle: {
      height: 90,
      paddingHorizontal: 5,
      paddingTop: 0,
      backgroundColor: 'rgba(34,36,40,1)',
      position: 'absolute',
      borderTopWidth: 0,
  },
})}
  >
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="List" component={RegistrationList} />
  <Tab.Screen name="News" component={News} />
  <Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>

Solution 5:^[5]

you can set the property in tabBarOptions of Tab.Navigator

 <Tab.Navigator
          screenOptions={({ route }) => ({
          ....
           })}

          tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
            showLabel: false,
            style: {backgroundColor: primaryLighterColor,},
          }}
    >

Solution 6:^[6]

<Navigator
  screenOptions={{
    tabBarActiveTintColor: theme.colors.main,
    tabBarInactiveTintColor: theme.colors.text_detail,
    tabBarShowLabel: false,
    tabBarStyle: {
      paddingVertical: Platform.OS === 'ios' ? 20 : 0,
      height: 78,
      backgroundColor: theme.colors.background_primary
    }
  }}
>

Solution 7:^[7]

  <Tab.Navigator
    screenOptions={{
    tabBarActiveTintColor: "red",
    tabBarInactiveTintColor: "blue",
    tabBarStyle: {
      height: 55,
    },
    tabBarLabelStyle: {
      fontSize: 14,
      margin: 0,
    },
  }}>

Solution 8:^[8]

you may try this

<Tab.Navigator 
screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        gestureDirection: 'horizontal',
        tabBarStyle: {
          backgroundColor: '#3E48A0',
        },
      }}>
</Tab.Navigator>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Victor
Solution 2	Wellerson
Solution 3	dblazeski
Solution 4	Andrew Chaa
Solution 5	shammi
Solution 6	Joel Ambu
Solution 7	Huy Nguyá»…n
Solution 8	NicoCaldo

'How to set the background color of Tab.Navigator?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]