CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Fatih Işık
Fatih Işık

Reputation: 79

React navigation - switch between 2 tab navigation

Friends, I tried many times but I could not do it. How can I switch between 2 tab navigation, for example 1. tab navigation become a member and login, 2. tab navigation homepage, settings etc. I was doing it in version 3 but now for some reason I couldn't, thanks to all the friends who helped

Upvotes: 0

Views: 222

Answers (1)

Eric Hasselbring
Eric Hasselbring

Reputation: 1424

here is a quick snippet, i only show one tab navigator's full logic for reference, but the second can follow the same logic.

Using react navigation v5.x.x It works by nesting navigators in screens

 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';

 const HomeTabsNavigator = createBottomTabNavigator();

      const HomeTabRenderer = () => {
        const initialRouteName = 'Feed';
        const initialRouteParams = {};
        return (
          <HomeTabsNavigator.Navigator
            initialRouteName={initialRouteName}
            initialRouteParams={initialRouteParams}
          >
            <HomeTabsNavigator.Screen name={'Feed'} component={'<add react component>'} />
            <HomeTabsNavigator.Screen name={'Dashboard'} component={'<add react component>'} />
            <HomeTabsNavigator.Screen name={'Friends'} component={'<add react component>'} />
          </HomeTabsNavigator.Navigator>
        );
      };

      const Stack = createStackNavigator();
      const StackRenderer = () => {
        const initialRouteName = 'FirstTabNav';
        const initialRouteParams = {};
        return (
        <NavigationContainer>
          <Stack.Navigator initialRouteName={initialRouteName}
            initialRouteParams={initialRouteParams}
            headerMode={'none'}
          >
            <Stack.Screen name={'FirstTabNav'} component={HomeTabRenderer} />
            <Stack.Screen name={'SecondTabNav'} component={OtherTabRenderer} />
          </Stack.Navigator>
        </NavigationContainer>
        )
      }

Upvotes: 1

Related Questions