How to set the background color of Tab.Navigator?
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',
},
},
}}>
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>
);
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>
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' }}