CODEWITHSUNDEEP
react-nativereact-navigation
Harshana
Harshana

Reputation: 543

Dynamic tab bar icon/label in React Navigation V3

I have a tab navigator that has multiple stack navigators nested. I want to dynamically change the tab icon/tab name when I navigate to different screens in stack navigators. I know this is not possible out of the box with V3. (https://reactnavigation.org/docs/en/navigation-options-resolution.html). Any suggestions to bypass this ? Tia.

Upvotes: 1

Views: 4290

Answers (2)

testFireAcc Fire
testFireAcc Fire

Reputation: 29

It is possible from everywhere, because navigationOptions it is "static" method. Just create navigationOptions in your screen - Home (example)

// Define tab options in Home screen

 static navigationOptions = ({ navigation }) => {
      return {
        title: 'Home',
        tabBarIcon: ({ focused }) => {
          return <IconComponent name={'Home'} focused={focused}/>; 
        },
        tabBarLabel: "Home"
      };
    };

then call this method from place what you need and change data inside

Home.navigationOptions = {
        tabBarIcon: ({ focused }) => {
           return <AnotherIconComponent name={'LogOut'} focused={focused}/>; 
            }
};

Upvotes: 1

Harshana
Harshana

Reputation: 543

React Navigation V3 came with some breaking changes. Changing parent navigator's navigation options is only allowed from immediate children. In my case tab navigators navigation options can only be changed by the stack navigators. Not from it's screens. Refer this link

However if you want to change tab labal/tab icon based on the route you can do the following.

const HomeStackNav = createStackNavigator({
  home: { screen: Home },
  Report: { screen: Report }
});

HomeStackNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let navigationOptions = {};
  if (routeName === 'home') {
    navigationOptions.tabBarLabel = 'Welcome';
    navigationOptions.tabBarIcon = ({ focused }) => <WelcomeIcon focused />;
  } else {
    navigationOptions.tabBarLabel = 'Home';
    navigationOptions.tabBarIcon = ({ focused }) => <HomeIcon focused />;
  }
  return navigationOptions;
}

const TabNav = createBottomTabNavigator({
  HomeTab: HomeStackNav
})

Hope this helps.

Upvotes: 3

Related Questions