CODEWITHSUNDEEP
react-nativereact-navigation
Lucky_girl
Lucky_girl

Reputation: 4863

How to change activeTintColor in TabBar (react-navigation) dynamically ?

I'm using react-navigation in my app, I want to know how is possible to change activeTintColor in TabBar dynamically?

I have such code, but it doesn't change activeTintColor: 

  static navigationOptions = ({ navigation, screenProps }) => ({
    actionButton: {
      title: _('create'),
      icon: 'plus',
      onPress: () => navigation.navigate('EventCreate')
    },
    tabBarLabel: _('calendar'),
    tabBarIcon: ({focused}) => <Icon featherName="calendar" active={focused}/>,
    tabBarOptions: { activeTintColor:'red'}
  })

Upvotes: 1

Views: 835

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You can do it by marking a Custom Tab Bar Component.

import { TabNavigator } from 'react-navigation';

const TabBar = TabNavigator.Presets.Default.tabBarComponent

const CustomTabBar = ({...props}) => {
    props.activeTintColor = //... change the color based on screen navigation state 
    return <TabBar {...props} />
}

and use it as

const CustomTabs = TabNavigator(
    {
        // ...Screens
    },
    {
        tabBarComponent: CustomTabBar,
    },
);

The Custom Tab Bar Component has access to these props.

The navigation state objects are defined as in here

Upvotes: 2

Related Questions