0
591
ViewsHow to change Botton tab bar Background Color in React Native?
I'm using @react-navigation/bottom-tabs Package. But I don't know how to change background color of the tab bar. Here is my Code.
import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from "./TabScreen/Home";
import Category from "./TabScreen/Category";
import Search from "./TabScreen/Search";
import Profile from "./TabScreen/Profile";
import Colors from "../../../Style_Sheet/Colors";
const Tab = createBottomTabNavigator();
const Tabs =()=>{
return(
<Tab.Navigator tabBarPosition="bottom" barStyle={{ backgroundColor: '#0000' }}>
<Tab.Screen name="Home" component={Home} options={{headerTitle:"Explore",headerTintColor:Colors.white,}}/>
<Tab.Screen name="Category" component={Category} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
)
}
export default Tabs;
I am adding under then Tab.Navigator tag but it's not working.
·
Juan Pablo Isaza
2 answers
Answer question0
For version 6 you have to add screenOptions like this in Tab.Navigator
<Tab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: '#000',
},
}}>
</Tab.Navigator>
·
Juan Pablo Isaza
Report
0
If
<Tab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: '#fff',
},
}}>
</Tab.Navigator>
not working then change the Theme Color,
The below code will work when assigning border-radius and can't change the background color
1.import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
2.
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#fff',
},
};
<NavigationContainer theme={MyTheme}>
·
Juan Pablo Isaza
Report
Answer question