CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigationreact-navigation-stackreact-navigation-drawer
Nata Vacheishvili
Nata Vacheishvili

Reputation: 497

React Native Stack & Drawer Navigation v5

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.

Upvotes: 0

Views: 538

Answers (1)

Shahanshah Alam
Shahanshah Alam

Reputation: 605

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.

Upvotes: 1

Related Questions