CODEWITHSUNDEEP
reactjsnative
Ayman Nasreddin
Ayman Nasreddin

Reputation: 61

Stack navigation in react native

To create my app I followed some tutorials and I created this Stack navigator:

  const AppStack = createStackNavigator();
    const [user] =useContext(UserContext)

    return (
        <AppStack.Navigator headerMode="none">
            {user.isLoggedIn === null ? (
            <AppStack.Screen name="Loading" component={LoadingScreen} />

            ) : user.isLoggedIn ? (
            <AppStack.Screen name="Main" component={MainStackScreen} />

            ) : (
            <AppStack.Screen name="Auth" component={AuthStackScreen} />
            
            ) 
            }
        </AppStack.Navigator>
    );

LoadingScreen will appear just the first seconds

MainStackScreen is another screen in which I have a bottom tab navigator with the main screen

    const MainStack = createBottomTabNavigator()
       <MainStack.Navigator tabBarOptions={tabBarOptions} screenOptions={screenOptions}>
            <MainStack.Screen name="Exercises" component={**ExercisesScreen**} />
            <MainStack.Screen name="Measurements" component={MeasurementsScreen} />
            <MainStack.Screen name="Workout" component={MeasurementsScreen} />
            <MainStack.Screen name="Progresses" component={ProgressesScreen} />
            <MainStack.Screen name="Profile" component={ProfileScreen} />
        </MainStack.Navigator>

AuthStackScreen is another screen in which I have another stack navigator that contains the signup and the signin screens

 const AuthStack = createStackNavigator()

    return (
        <AuthStack.Navigator headerMode="none">
            <AuthStack.Screen name="SignIn" component={SignInScreen}/>
            <AuthStack.Screen name="SignUp" component={SignUpScreen}/>
        </AuthStack.Navigator>
    );

But what if I want to create other screens to navigate in from ExercisesScreen or another screen? I need to create another navigator to handle them but I don't know how to insert it in these navigations that I created.

Upvotes: 0

Views: 218

Answers (1)

Ayman Nasreddin
Ayman Nasreddin

Reputation: 61

I solved it like this, in the Main navigator I replaced ExercisesScreen with FirstScreenNavigator

       <MainStack.Screen name="Exercises" component={FirstScreenNavigator} />

and I Created a FirstScreenNavigator.js that contains

const FirstScreenNavigator = () => {
    return(
        <Stack.Navigator>
            <Stack.Screen 
                name="Screen1"
                component={Screen1}
            />
            <Stack.Screen
                name="Screen2"
                component={Screen2}
            />
        </Stack.Navigator>
    )
}
export {FirstScreenNavigator}

Now when I open the ExercisesScreen on the BottomTabNavigator I can easily navigate to the screens that I add into FirstScreenNavigator.js.

Many thanks to Bas Van Der Linden for the suggestions

Upvotes: 1

Related Questions