CODEWITHSUNDEEP
react-nativereact-navigation
user938363
user938363

Reputation: 10350

How to set initial tab in createBottomTabNavigator()

In the app with react navigation 3.11.0, there are 3 tabs:

return createBottomTabNavigator(
          {
            Event: {
              screen: EventStack,
              navigationOptions: {
                title: "Event",
              },
            },
            Group: {
              screen: GroupStack,
              navigationOptions: {
                title: "Group",
              },
            },
            Contact: {
              screen: ContactStack,
              navigationOptions: {
                title: "Contact",
              },
            },
          }, bottomTabNavOptions,
           {initialRouteName: Group}  //<<<== did not work
      );

I would like to set an initial tab on Group. Tried

{initialRouteName: Group}

and

{initialTabNavigator: Group}

Both of them did not work. What is the right way to set initial tab?

The bottomTabNavOptions is:

const bottomTabNavOptions =  {
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      console.log("route name", routeName);
      let iconName;
      if (routeName === 'Event') {
        iconName = `list-unordered`;
      } else if (routeName === 'Contact') {
        iconName = `person`;
      } else if (routeName === 'Group') {
        iconName = `organization`
      }

      return <Icon name={iconName} size={30} color={tintColor} type='octicon' />;
    },
  }),
  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray',
  },
};

Upvotes: 1

Views: 1530

Answers (3)

Ian Keller
Ian Keller

Reputation: 890

Saw your comment that you initially tried passing a string. Same thing happened to me. I just had to restart the simulator I was using and then it started working for me.

Upvotes: 0

hong developer
hong developer

Reputation: 13906

The createBottomTabNavigator tab has two parameters. But you seem to be sending three parameters.

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

BottomTabNavigatorConfig:

  • initialRouteName: string
createBottomTabNavigator(
          {
            Event: {
              screen: EventStack,
              navigationOptions: {
                title: "Event",
              },
            },
            Group: {
              screen: GroupStack,
              navigationOptions: {
                title: "Group",
              },
            },
            Contact: {
              screen: ContactStack,
              navigationOptions: {
                title: "Contact",
              },
            },
          }, 
           {
            initialRouteName: 'Group', <= you use string
            bottomTabNavOptions,
           } 
      );

Upvotes: 2

Auticcat
Auticcat

Reputation: 4489

You need to use a string, you are passing the whole "Group" component there:

initialRouteName:"Group"

Upvotes: 2

Related Questions