Changing createMaterialTopTabNavigator default styling - css

Question

I have createMaterialTopTabNavigator in my app with three tabs. These three tabs themselves belong to different createStackNavigators. I have passed drawer icon as my header right to createMaterialTopTabNavigator.
I want to edit the background color of createMaterialTopTabNavigator tabs but it is getting override with my HeaderRight icon styling.
const Daily = createStackNavigator(
{
Daily: {
screen: DailyStack,
},
Another:{
screen: Another,
}
},
{
headerMode:'none'
},
);
const Monthly = createStackNavigator({
Monthly: {
screen: MonthlyStack,
},
},
{
headerMode:'none'
});
const Range = createStackNavigator({
Range: {
screen: RangeStack,
}
},
{
headerMode:'none'
});
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
navigationOptions: ({ navigation }) => {
return {
// tabBarOptions:{
// indicatorStyle: {
// backgroundColor: "#2E86C1",
// },
// // tabStyle:{
// // backgroundColor: '#F7F9F9'
// // },
// labelStyle :{
// color: '#2E86C1'
// },
// activeTintColor:'blue',
// inactiveTintColor: {
// color: 'green'
// },
// style: {
// backgroundColor: 'white',
// elevation: 0, // remove shadow on Android
// shadowOpacity: 0, // remove shadow on iOS,
// borderWidth:1,
// borderColor:'#ccc'
// }
// },
headerRight: (
<Icon style={{ paddingRight:20 }} onPress={() => navigation.openDrawer()} name="menu" color='#000' size={30} />
)
};
}
}
)
If I am passing the styling options inside navigationOptions then the styling does not works; only HeaderRight shows, and if I pass the styling options outside the navigationOptions, the styling works but then it hides the HeaderRight Icon from right

Answer 1

you must entirely study this link.
another important subject is that navigationOptions related to every screen in stack. such as this:
const App = createMaterialTopTabNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#633689',
},
headerTintColor: '#FFFFFF',
title: 'TabExample',
},
},
});
so if you want to set style for top tab bar, you must use defaultNavigationOptions property such as this:
const DashboardTabNavigator = createMaterialTopTabNavigator(
{
Daily,
Monthly,
Range
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
tabBarOptions:{
style: {
backgroundColor: 'white',
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS,
borderWidth:1,
borderColor:'#ccc'
}
},
};
}
}
)
Sharing common navigationOptions across screens
It is common to want to configure the header in a similar way across many screens. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using in our running example, and you'll notice that when you navigate to the DetailsScreen the colors go back to the defaults. Wouldn't it be awful if we had to copy the navigationOptions header style properties from HomeScreen to DetailsScreen, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the stack navigator under the property defaultNavigationOptions.