React Native Stack & Drawer Navigation v5

Question

I am new to react native and I am trying to create a menu, that would open on click and slide out, and on click outside the menu would slide back in.

It has been very hard for me to find any decent tutorial/explanation about how to have both stack and drawer navigation available for a page and functioning.

currently, my App.js looks like this:

    import 'react-native-gesture-handler';
import React from 'react';
import Home from './app/screens/Home/Home';
import ArtistListing from './app/screens/ArtistListing/ArtistListing';
import ArtPeriods from './app/screens/ArtPeriods/ArtPeriods';
import Login from './app/screens/Login/Login';
import Quiz from './app/screens/Quiz/Quiz';
import GuessWhen from './app/screens/GuessWhen/GuessWhen';
import { NavigationContainer, useLinking } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {Auth, Hub} from 'aws-amplify';
import {SetCurrentUser} from './src/model/User';
import LearnMore from './app/screens/LearnMore/LearnMore';
import {CreateAllArtistsWithDependencies} from './src/model/Artists';
import ExploreTimePeriod from './app/screens/ExploreTimePeriod/ExploreTimePeriod';
import ExploreArtist from './app/screens/ExploreArtist/ExploreArtist';
import PhotoGalleryScreen from './app/screens/PhotoGalleryScreen/PhotoGalleryScreen';
import ExploreTimePeriods from './app/screens/ExploreTimePeriods/ExploreTimePeriods';
import ExploreArtists from './app/screens/ExploreArtists/ExploreArtists';
import QuizSummary from './app/screens/QuizSummary/QuizSummary';
import ContactUs from './app/screens/ContactUs/ContactUs';
import Profile from './app/screens/Profile/Profile';
import Favorites from './app/screens/Favorites/Favorites';
const Stack = createStackNavigator();
const App = () => {
  return (
      <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
              <Stack.Screen name="Login" component={Login} options={{headerShown:false}} />
              <Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>
              <Stack.Screen name="ArtPeriods" component={ArtPeriods} options={{headerShown:false}}/>
              <Stack.Screen name="GuessWhen" component={GuessWhen} options={{headerShown:false}}/>
              <Stack.Screen name="Quiz" component={Quiz} options={{headerShown:false}}/>
              <Stack.Screen name="LearnMore" component={LearnMore} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreTimePeriod" component={ExploreTimePeriod} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreTimePeriods" component={ExploreTimePeriods} options={{headerShown:false}}/>
              <Stack.Screen name="PhotoGalleryScreen" component={PhotoGalleryScreen} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreArtist" component={ExploreArtist} options={{headerShown:false}}/>
              <Stack.Screen name="ExploreArtists" component={ExploreArtists} options={{headerShown:false}}/>
              <Stack.Screen name="QuizSummary" component={QuizSummary} options={{headerShown:false}}/>
              <Stack.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
              <Stack.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
              <Stack.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>
          </Stack.Navigator>
      </NavigationContainer>
  );
};

export default App;

I would like to have a drawer navigator as well with the pages listed below. I know I might need a switch navigator, but everything is super hard to find for version 5. I bet I am not the only one searching for a clear answer on how to do this.

          <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
      <Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/>
      <Drawer.Screen name="Favorites" component={Favorites} options={{headerShown:false}}/>

If you have an idea about this, please give me a suggestion.

@ShanAlam yes user should be able to click on the menu item and get the menu items on each of these screens here (Login page will not have a header so they simply won't be able to click and navigate) — Nata Vacheishvili
– Nata Vacheishvili, Commented Jun 1, 2020 at 20:10
Basically you want an AuthFlowStack i.e. before login, and after login ContentStack with drawer navigation. right? — Shahanshah Alam
– Shahanshah Alam, Commented Jun 1, 2020 at 20:13
And react navigation 5 doesn't have SwitchNavigator that is why you are having issue — Shahanshah Alam
– Shahanshah Alam, Commented Jun 1, 2020 at 20:14
I have not worked with SwitchNavigator before ever - I am really new to react. I did work on all these screens but still do not have a proper menu. I'd like to have an auth stack and after auth stack, switch to stack navigator and be able to access drawer navigator on every screen of the stack. Not sure if you know how to do this and if you can walk me through an easy example, but my main priority is not authstack right now. If I can learn about it great, but otherwise I really want to know how to be able to access main menu with some of the screens that I have defined in the stack navigation — Nata Vacheishvili
– Nata Vacheishvili, Commented Jun 1, 2020 at 20:17

Shahanshah Alam · Accepted Answer · 2020-06-01 21:35:35Z

1

Let'say your stack after login like

const Stack = createStackNavigator();
const App = () => {
return (
  <NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
  <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
  <Stack.Screen name="ArtistListing" component={ArtistListing} options={{headerShown:false}}/>  
  </Stack.Navigator>
  </NavigationContainer>
  );
  };

Let's say this is your drawer navigation.

const Drawer = createDrawerNavigator();
function drawers(){
<Drawer.Screen name="Home" component={App} options={{headerShown:false}}/>
 <Drawer.Screen name="ContactUs" component={ContactUs} options={{headerShown:false}}/>
  <Drawer.Screen name="Profile" component={Profile} options={{headerShown:false}}/> 
   }

Now Drawer will be everywhere by default. And HomeScreen will be your first screen by default.

Now the part of AuthFlow.

const AuthFlowStack = createStackNavigator();
function AuthFlow(){
<AuthFlow.Screen name='LogIn' component={LogIn} />
}

Main Stack Flow(which will act as SwitchNavigator)

const Main = createStackNavigator();
function MainFlow(){
{this.state.isLogin ? <Drawer/> :<AuthFlow/>}
}
export default {MainFlow};

And set the value of isLogin to true when you login and send as parameter and set it false when logout.

edited Jun 1, 2020 at 21:35

answered Jun 1, 2020 at 20:48

Shahanshah Alam

6059 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Nata Vacheishvili Over a year ago

This is great and I understand what you mean here and its amazing example of the auth flow honestly to say, because everything that I have seen so far seemed very complicated. now I am wondering, do I need to create the slide out and in action on menu click myself and control the state of the menu being open and closed myself as well?

Nata Vacheishvili Over a year ago

as I saw I can have drawerContent as an attribute and give it a component. Would that work on sliding out and in itself /

Nata Vacheishvili Over a year ago

what you recommended works just fine, I am able to access the pages now from navigator - if there is any shortcut to opening and closing the drawer and how to control what data is passed to it ?

Shahanshah Alam Over a year ago

Yes you have to do like this. But if it doesn't work then change the flow put AppStack in DrawerStack and add drawerStack to MainStack instead of AppStack.

Nata Vacheishvili Over a year ago

so I could give it a drawerContent and it should control itself opening or not?

|

Collectives™ on Stack Overflow

React Native Stack & Drawer Navigation v5

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related