How to set the background color of Tab.Navigator in 2023?-CodePudding

The below code is for bottom tab navigator how do I change color of it! I tried many things like changing the color of the background using style options tried screen options color but it was not working I even activetint color and other but it was only icons and all .If anyone can help me regarding this I would be grateful :)

<Tab.Navigator initialRouteName='CustomerStack'
        
         screenOptions={({ route, }) => ({    
            
            tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                let rn = route.name;
                if (rn === "CustomDrawer") {
                    iconName = focused ? 'home' : 'home'
                }
                else if (rn === "CustomerStack") {
                    iconName = focused ? 'home' : 'home'
                } 
                else if (rn === "Cart") {
                    iconName = focused ? 'shopping-cart' : 'shopping-cart'
                } else if (rn === "Account") {
                    iconName = focused ? 'user' : 'user'
                }
                return <User name={iconName} size={size} color={color} />
            },
        })}>

This is what I tried

<Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#e91e63',
      style: {
        backgroundColor: 'orange',
      },
    }}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>

CodePudding user response：

Try in this way:

<Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            backgroundColor: 'orange',
          },
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>

CodePudding user response：

According to the new official document you can check below code:

<Tab.Navigator
      initialRouteName="Feed"
      activeColor="white"
      labelStyle={{ fontSize: 12 }}
      shifting={true}
      labeled={true}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: 'red',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
           tabBarColor: 'blue',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: 'green',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
        
      />
    </Tab.Navigator>