CODEWITHSUNDEEP
reactjsreact-nativereact-navigation-bottom-tab
Mujtaba Sarwar
Mujtaba Sarwar

Reputation: 41

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

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>

Upvotes: 1

Views: 2303

Answers (3)

Nensi Kardani
Nensi Kardani

Reputation: 2364

Set the background color of Tab.Navigator like below and also you can set tabBarActiveTintColor and tabBarInactiveTintColor so no need to set tintcolor on particular component:

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator screenOptions={{
          tabBarStyle: {
            backgroundColor: 'orange',
          },
          tabBarActiveTintColor: 'red',
          tabBarInactiveTintColor: 'green',
        }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Upvotes: 1

darshilsakhiya
darshilsakhiya

Reputation: 657

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>

Upvotes: 1

Yakupguly Malikov
Yakupguly Malikov

Reputation: 715

Try in this way:

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

Upvotes: 5

Related Questions