CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stackreact-navigation-v5react-navigation-drawer
Gunjan Patel
Gunjan Patel

Reputation: 2372

How to user Stack and Drawer in React Native with combine v5

I'm new to React Native need a guideline on navigation feature how it works and How can I setup authentication and dashboard screen using Stack.screen and Drawer.screen. Following is my code and I tried to written.

Please correct and if possible then explain it.

import * as React from 'react';

import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import LoginScreen from "../layouts/LoginScreen";
import ForgotPasswordScreen from "../layouts/ForgetPassword";
import HomeScreen from '../layouts/HomeScreen';
import SettingScreen from '../layouts/SettingScreen';
import ContactUs from '../layouts/ContactUs';
import Help from '../layouts/Help';

const Stack = createStackNavigator();
const AuthFlowStack = createStackNavigator();
const Drawer = createDrawerNavigator();

const appName = "XXX";

// Took it for general all pages
const MyStack = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator 
            initialRouteName='Home'
            headerMode='float'
            mode='modal'
          >
            <Stack.Screen options={{
                            headerShown: false
                          }}
                          name='Home' 
                          component={HomeScreen} />
            <Stack.Screen name="SettingScreen" component={SettingScreen} options={{headerShown:false}}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
}

// Inside Drawer I want to show these pages
function MyDrawer() {
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MyStack} options={{headerShown:false}} />
        <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}} />
        <Drawer.Screen name="Help" component={Help} options={{headerShown:false}} />
      </Drawer.Navigator>
}

// Auth module where Login/Registration/Forgetpassword Like screen without authentication user will open
function AuthFlow() {
  <NavigationContainer>
    <AuthFlowStack.Screen name='Login' component={LoginScreen} />
    <AuthFlowStack.Screen options={({ navigation, route }) => ({
      headerLeft: ({props}) => (
        <HeaderBackButton
          {...props}
          onPress={() => {
            navigation.navigate("Login")
          }}
        />
      ),
      title: `Forgot Password? - ${appName}`,
      headerTitleAlign: 'center'
    })}
    name='ForgotPasswordScreen'
    component={ForgotPasswordScreen} />
  </NavigationContainer>
}

//Main AppStack where I'm thinking to check isLoggedIn and MyDrawer / AuthFlow I can add.
function AppStack(){
  <MyDrawer/>
}
export default {AppStack};

Upvotes: 1

Views: 1432

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

The code would be something like below

function AuthFlow() {
    <AuthFlowStack.Navigator>
        <AuthFlowStack.Screen name='Login' component={LoginScreen} />
        <AuthFlowStack.Screen options={({ navigation, route }) => ({
            headerLeft: ({ props }) => (
                <HeaderBackButton
                    {...props}
                    onPress={() => {
                        navigation.navigate("Login")
                    }}
                />
            ),
            title: `Forgot Password? - ${appName}`,
            headerTitleAlign: 'center'
        })}
            name='ForgotPasswordScreen'
            component={ForgotPasswordScreen} />
    </AuthFlowStack.Navigator>
}

//Main AppStack where I'm thinking to check isLoggedIn and MyDrawer / AuthFlow I can add.
function AppStack() {
    <NavigationContainer>
        {
            isLoggedIn ? <MyDrawer /> : <AuthFlow />
        }
    </NavigationContainer>
}

Here you have two navigators drawer which is your appstack and the stack navigator for authentication.

Once you update the isLoggedIn (using context,state,asyn storage depends on your app) one navigator would be shown based on the value.

And you should have only one NavigationContainer at root level.

Better have a look at https://reactnavigation.org/docs/auth-flow/ to get a deeper understanding.

Upvotes: 1

Related Questions