0

How can I change the background color of tab bar item when the screen is focused. I am using react-navigation version 6.x. Here is my code snippet for the bottom bar

<NavigationContainer>
      <Tab.Navigator
        initialRouteName="Main"
        activeColor={colors.yellow}
        inactiveColor={colors.white}>
        <Tab.Screen
          name="Main"
          component={Main}
          options={{
            tabBarIcon: ({color}) => (
              <Icon name="home" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="Countries"
          component={Countries}
          options={{
            tabBarIcon: ({color}) => (
              <Icon name="ios-globe" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen name="GlobalCasesScreen" component={GlobalCasesScreen} />
      </Tab.Navigator>
    </NavigationContainer>
Shoaib Khan
  • 1,020
  • 1
  • 5
  • 18
Rohit Aggarwal
  • 1,048
  • 1
  • 14
  • 32

1 Answers1

1

This is how you do that:

<Tab.Navigator
  screenOptions={{
    tabBarActiveBackgroundColor: "blue",
  }}
>

You can replace "blue" with any color you want.

For more information about BottomTabNavigator, check this

jted95
  • 1,084
  • 1
  • 9
  • 23