CODEWITHSUNDEEP
react-nativereact-native-navigationstack-navigatorreact-navigation-bottom-tab
Olivia
Olivia

Reputation: 2161

Is it possible to start on the second tab when using the createBottomTabNavigator?

I want to keep my tab navigator visually to stay in this order: Home tab, Connect tab, Chat tab

But I want to have the Connect tab (the second tab) be the first one that open when the app loads. I don't see a way to add this to the stack navigator without rearranging the order of the tabs. Is there another way to target a tab other then the first one with this structure:

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        ProfileCardScreen,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        AllChatScreen,
        SingleChat,
      })
    },
    {
      defaultNavigationOptions: ({navigation}) => ({
        tabBarIcon: ({tintColor}) => {
          const {routeName} = navigation.state;
          if (routeName === "Home") {
            return <MaterialIcons name={"home"} size={20} color={tintColor} />;
          } else if (routeName === "Connect") {
            return <MaterialIcons name={"link"} size={20} color={tintColor} />;
          } else if (routeName === "Chat") {
            return <MaterialIcons name={"chat"} size={20} color={tintColor} />;
          }
        },
      }),
      tabBarOptions: {
        activeTintColor: Colors.Brick,
        inactiveTintColor: Colors.Gray,
      },
    }
  ),
});

Upvotes: 1

Views: 694

Answers (1)

Amir Doreh
Amir Doreh

Reputation: 1429

You can pass a prop named "initialRouteName" with the name of the route you want to be displayed when you entered the navigation first

here you can fine more details with React Navigation V5

Upvotes: 6

Related Questions