I want the color to be the default gray color when the tab is not selected but to be my tabBarColor
color when the tab is selected. I could not find a way to change the color of the title in the tab bar.
How can I do that?
This is my code:
Home:{
screen: TabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: focused ? `${tabBarColor}` : tintColor}}
/>
),
//headerStyle: {backgroundColor: "#553A91"},
//headerTitleStyle: {color: "#FFFFFF"},
header: null,
}),
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style={{ color: focused ? `${tabBarColor}` : tintColor }}
/>
),
//headerStyle: {backgroundColor: "#553A91"},
//headerTitleStyle: {color: "#FFFFFF"},
header: null,
}),
},
}),
}
In TabNavigator Docs, it is clearly indicated that you need to use activeTintColor
activeTintColor
: label and icon color of the active tab
Example:
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
navigationOptions: ({navigation}) => ({
tabBarIcon: ({focused}) => {
...
}
}),
tabBarOptions: {
activeTintColor: '#ffffff',
},
});