activeTintColor and inactiveTintColor do not work

[zakster12]

I would like to use the activeTintColor and inactiveTintColor for a tab but it doesn't take any effect. My code:

class TabOneNavigation extends React.Component {
	static navigationOptions = {
		title: Strings.getTickets,
		headerTitleStyle: [NavBarTitleStyle.title, { color: Colors.black }],
		headerStyle: { backgroundColor: 'white' },
		tabBarLabel: 'Get ticket',
		tabBarIcon: ({ tintColor }) => (
			<TabBackIcon
				type={'profile'}
				tintColor={{ tintColor }}
			/>
		),
		tabBarActiveTintColor: 'red',
		tabBarInactiveTintColor: 'green',
	};
       ...
}

These are working:

tabBarLabel: 'Get ticket',
tabBarIcon: ({ tintColor }) => (
	<TabBackIcon
		type={'getTicket'}
		tintColor={{ tintColor }}
	/>
),

but these do not work:

tabBarActiveTintColor: 'red',
tabBarInactiveTintColor: 'green',

I also tried the old way but it's the same:

activeTintColor: 'red',
inactiveTintColor: 'green',

software	version
react-navigation	1.0.9
react-native	0.43

[WillyRamirez]

try nesting them in TabBarOptions : {}

tabBarOptions: {
      activeBackgroundColor: colors.gisOrange,
      inactiveBackgroundColor: '#EFEFEF',
      activeTintColor: '#ffffff',
      inactiveTintColor: colors.textColor,
      showIcon: true,
    },

[zakster12]

I just tried and it's not working again.

[WillyRamirez]

You want the style only for a single tab? Is that why you are using static navigationOptions?
This definitely works, but it will style all your tabs.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

[zakster12]

Yes, I would like to change them only for one tab (when it's active). When this tab is active, I also change the background color of the TabBar but this is working. Now I need to change the text and icon colors of the active tab.

[WillyRamirez]

Ok, i think that's currently unsupported, the only tabbar stuffz you can change from the static navigationOptions are tabBarIcon and tabBarLabel I believe.

You could pass a tabBarIcon which is an image or a view with a different backgroundColor, although it feels unnatural.

Your best bet is to pass a custom tabBarComponent, fork the ReactNavigation tabbar, and make your changes there. This sounds like a lot of work but actually did this yesterday and it took me about 1 hour.
See this link https://snack.expo.io/SkS6svUlW

[zakster12]

I already have a custom tabBarComponent:

import React from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';

import TabOneNavigation from './Navigation/tabOne/views/TabOneNavigation';
import TabTwoNavigation from './Navigation/tabTwo/views/TabTwoNavigation';
import TabThreeNavigation from './Navigation/tabThree/views/TabThreeNavigation';
import Colors from './../Constants/Colors';

const Tabs = TabNavigator(
	{
		TabOneNavigation: { screen: TabOneNavigation },
		TabTwoNavigation: { screen: TabTwoNavigation },
		TabThreeNavigation: { screen: TabThreeNavigation },
	},
	{
		tabBarComponent: (props) => {
			const backgroundColor = props.position.interpolate({
				inputRange: [0, 1, 2],
				outputRange: [
					'white',
					Colors.greenLightGradient,
					'white'
				],
			});

			const borderTopColor = props.position.interpolate({
				inputRange: [0, 1, 2],
				outputRange: [
					'rgba(0, 0, 0, .2)',
					Colors.greenLightGradient,
					'rgba(0, 0, 0, .2)'],
			});

			return (
				<TabBarBottom
					{...props}
					style={{ borderTopColor, backgroundColor }}
				/>
			);
		}
	}
);

export default Tabs;

but I am not sure how exactly to make the same logic as the backgroundColor for the active and unactive tint color.

Thank you for your time and effort! I appreciate it!

[WillyRamirez]

You can do this by copying the CustomNavBar from the expo link i just gave you, and use that instead of the default TabBarBottom

In the render() function find the .map

{routes.map((route: NavigationRoute, index: number) => { 
 // catch the tab you want to alter and pass it antoher backgroundColor
}

[zakster12]

It's working. Thank you for the idea!

[rajayuvi]

tabBarIcon: ({focused, tintColor }) =>
<Image source={require("../images/bottompic.png")}
style={styles.image}
/>
},
It will surely work for you..