CODEWITHSUNDEEP
react-nativereact-navigation
Alwaysblue
Alwaysblue

Reputation: 11930

React-navigation multiple stack navigator with inital route

So i was creating RN project which had multiple stack navigator

So I have non logged in routes like this

import React from "react"
import { createNativeStackNavigator } from "react-native-screens/native-stack"
import { Introduction, Login } from "@src/screens/loggedOut"

const Stack = createNativeStackNavigator()

const defaultOptions = {
  headerShown: false
}
const LoggedOutRoutes = () => {
  return (
    <Stack.Navigator initialRouteName="introduction">
      <Stack.Screen name="introduction" component={Introduction} options={defaultOptions} />
      <Stack.Screen name="login" component={Login} options={defaultOptions} />
    </Stack.Navigator>
  )
}

export default LoggedOutRoutes

And similarly logged in routes

import React from "react"
import { createNativeStackNavigator } from "react-native-screens/native-stack"
import {Home,Settings } from "@src/screens/loggedIn"

const Stack = createNativeStackNavigator()

const defaultOptions = {
  headerShown: false
}
const LoggedIn = () => {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={Home} options={defaultOptions} />
      <Stack.Screen name="settings" component={Settings} options={defaultOptions} />
    </Stack.Navigator>
  )
}

export default LoggedIn

Now, I want to load either of these roots based on if user is logged in or not.

How would I do it?

Upvotes: 0

Views: 1050

Answers (1)

mblakew
mblakew

Reputation: 76

Assuming you have a login state saved, you can wrap your navigation in the NavigationContainer component from "@react-navigation/native" and render the correct navigation conditionally. Something like this:

<NavigationContainer>

  {userLoggedIn ? <LoggedIn /> : <LoggedOutRoutes />}

</NavigationContainer>

Upvotes: 1

Related Questions