CODEWITHSUNDEEP
javascriptreact-nativereact-navigationjsx
Nicolas Silva
Nicolas Silva

Reputation: 639

How do i go from one stack to another containing a tab stack in React Navigation 5.x?

So i got 4 different screen, a showcase screen, a loading screen, a home and a library screen

the showcase screen will be the initial screen here, so when i finish the showcase i go to the loading screen, after that to the home which contains two tabs both home and library

this is how i think it should be done, but is not working

const InitialStack = createStackNavigator();
const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function InitialStackScreen() {
  return (
    <InitialStack.Navigator>
      <InitialStack.Screen name="Showcase" component={ShowcaseScreen} />
      <InitialStack.Screen name="Loading" component={LoadingScreen} />
    </InitialStack.Navigator>
  );
}

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Library" component={LibraryScreen} />
    </HomeStack.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Showcase">
        <Stack.Screen name="Showcase" component={InitialStackScreen} />
      </Stack.Navigator>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 1

Views: 1235

Answers (2)

Roy Chan
Roy Chan

Reputation: 285

You don't have to initialise 3 different stack navigator constructors. Also, I believe the following way to nest the navigators will work for your use case, Nesting a root stack navigator with one stack navigator and one bottom tab navigator.

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function InitialStackScreen() {
  return (
    <Stack.Navigator>
      <InitialStack.Screen name="Showcase" component={ShowcaseScreen} />
      <InitialStack.Screen name="Loading" component={LoadingScreen} />
    </Stack.Navigator>
  );
}

function HomeTabScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Library" component={LibraryScreen} />
    </Tab.Navigator>
  );
}

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Showcase" component={InitialStackScreen} />
        <Stack.Screen name="Home" component={HomeTabScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

More on nesting navigators and how they work here: https://reactnavigation.org/docs/nesting-navigators/

EDIT: To not be able to go back to loading and showcase screen

export default function Navigation() {
  const isAuth = useSelector(state => state.isAuth) // some redux state that indicates if user is authenticated
  return (
    <NavigationContainer>
      {!isAuth && <InitialStackScreen /> }
      {isAuth && <HomeTabScreen />
    </NavigationContainer>
  );
}

Upvotes: 2

Apollon Seven
Apollon Seven

Reputation: 21

It’s most likely because you don’t use createStackNavigator() of react-navigation
Also you use Stack.Navigator and Tab.Navigator, although you need to use one of these.

Check this snack!
https://snack.expo.io/@apollonseven/27cc9e

Upvotes: -1

Related Questions