How to set the background color of Tab.Navigator?

user_1250583 0
Viewed 36353

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).

screenshot

<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",
}
react-navigation-bottom-tab react-navigation react-native reactjs javascript
8 Answers

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>
);
user_107127290
user_15742630

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>
user_4379610

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' }}
user_32618250

you can set the property in tabBarOptions of Tab.Navigator

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

          tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
            showLabel: false,
            style: {backgroundColor: primaryLighterColor,},
          }}
    >
user_19923650 
<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
    }
  }}
>
user_129073530 
  <Tab.Navigator
    screenOptions={{
    tabBarActiveTintColor: "red",
    tabBarInactiveTintColor: "blue",
    tabBarStyle: {
      height: 55,
    },
    tabBarLabelStyle: {
      fontSize: 14,
      margin: 0,
    },
  }}>
user_144152440

you may try this

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