Tutorial React native drawer and stack for navigation

On this occasion I will share my experience in creating navigation menus with drawer and stack, drawer and stack are one of the component parts of react native. The operating system I use is Windows 10.

My assumption is that all of them already have the tools that will be used in our React Native project with our expo, if you haven’t already, you can read about it here.

Ok, let’s immediately create a new project via the command prompt, click start then type cmd and then click open

For the project name, you can be free, I’m here using the name learning drawer, typing the command “expo init belajardrawer” at the command prompt.

then select blank then press enter, allow the installation process to complete if successful it will appear like this

if successful, enter our project because I created the project earlier in C:\Users\[your user name on the computer]> then to enter our project type the command “cd belajardrawer” so it looks like this C:\Users\[name your user on the computer]> cd belajardrawer after logging in it will look like this C:\Users\[your user name on the computer]\belajardrawer> then run our project, because I use expo with the command “npm start” so it looks like this C: \Users\[your username on the computer]\belajardrawer>npm start

If it works without error it will look like this

I assume you have installed the expo client on your android phone, if not, please download the expo client on google playstore and install it, then from your android phone run the expo client like this picture

Next, click Scan QR Code then scan the QR Code that appears in the command prompt above, if it works without errors then the android phone will look like this picture

CONGRATULATIONS WE HAVE SUCCESSFULLY MAKE A NEW PROJECT IN REACT NATIVE.

NEXT We will do the editing process in the app.js file, open the editor you can use notepad, notepad++ or visual studio code, I happen to use visual studio code and open our project folder which is in C:/Users/[your username on the computer ] / belajardrawer as shown below

To use the drawer component, we have to install it via the command prompt then type the command “npm install @react-navigation/drawer” it looks like this C:\Users\[your user name on the computer]\belajardrawer>npm install @react-navigation/ drawer

then press enter, allow the installation process to complete if successful it will look like this

After a successful installation, it’s time to use it in our code, open the app.js file in our project folder at C:/Users / [your username on the computer] / belajardrawer

Then delete all the contents of the code in app.js and paste the code below then save

import * as React from ‘react’;
import { Button, View } from ‘react-native’;
import { createDrawerNavigator } from ‘@react-navigation/drawer’;
import { NavigationContainer } from ‘@react-navigation/native’;

function HomePageScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Button
onPress={() => navigation.navigate(‘Category’)}
title=”Go To Category”
/>
</View>
);
}

function CategoryScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Button onPress={() => navigation.goBack()} title=”Go back homepage” />
</View>
);
}

const Drawer = createDrawerNavigator();

export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName=”Home”>
<Drawer.Screen name=”HomePage” component={HomePageScreen} />
<Drawer.Screen name=”Category” component={CategoryScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}

after that we run the code by opening a command prompt then go to our project C:\Users\[your user name on the computer]\belajardrawer> then type npm start it looks like this
C:\Users\[your username on the computer]\belajardrawer>npm start
then enter a QR will appear like this

open the expo application on our cellphones then scan the QR code, if there are no errors it will look like this on our cellphones, please check all the navigation menus.

oke, that’s my tutorial, hope this tutorial help you to learning make navigation in react native aplication.