How to set the background color of Tab.Navigator?

Question

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",
}

score 25 · Answer 1 · answered Nov 07 '21 at 13:55

25

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>

answered Nov 07 '21 at 13:55

Andrew Chaa

6,120
2
45
33

I tried your solution and everything is working except the tabBarStyle is only applied to 2 out of my 4 tabs why is that? – kd12345 Jun 08 '22 at 11:42
For some reason, background color for my first tab not changing, but other tabs design look okay. Any reason? – Alauddin Ahmed Sep 09 '22 at 06:13
The tabBarStyle defined in Navigator is overwritten by tabBarStyle in Screen, hope this help somebody – Anton Oct 23 '22 at 09:50

score 15 · Answer 2 · answered Nov 06 '20 at 04:47

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

score 14 · Accepted Answer · answered Apr 08 '20 at 17:01

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

score 12 · Answer 4 · answered Apr 08 '20 at 17:02

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

score 4 · Answer 5 · edited May 26 '22 at 16:42

4

you may try this

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

edited May 26 '22 at 16:42

NicoCaldo

1,171
13
25

answered May 26 '22 at 07:32

suman95

41
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '22 at 00:41

score 2 · Answer 6 · edited Apr 15 '22 at 09:31

2

you can set the property in tabBarOptions of Tab.Navigator

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

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

edited Apr 15 '22 at 09:31

shammi

1,301
1
10
25

answered Sep 27 '20 at 08:56

kemalony

195
1
7

score 2 · Answer 7 · answered Dec 28 '21 at 14:12

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

score 2 · Answer 8 · answered Mar 09 '22 at 02:57

2

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

answered Mar 09 '22 at 02:57

Huy Nguyễn

29
3

How to set the background color of Tab.Navigator?

8 Answers8

Linked