React Native Tutorial #24 - Drawer Navigation

Hey gang, in this React Native tutorial we'll see how to create a navigation drawer so that we can navigate around other screens not in our stack.
----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[Beginnerplaygames]

There is a lot of changes with the v5 API
I stacked for hours trying to fix the errors. For those who want the code:

reviewDetail.js

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import { roundToNearestPixel } from
import { golbalStyles } from "../styles/global";

export default function ReviewDetails({ route, navigation }) {
const item = route.params;
return (
<View
<Text>{item.title}</Text>
<Text>{item.body}</Text>
<Text>{item.rating}</Text>
</View>
);
}


homeStack.js

import React from "react";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetail";

const HomeStack = createStackNavigator();
export default function myStacks() {
return (
<HomeStack.Navigator initialRouteName="GameZone" headerMode="screen">
<HomeStack.Screen name="GameZone" component={Home} />
<HomeStack.Screen name="ReviewDetails" component={ReviewDetails} />
</HomeStack.Navigator>
);
}


aboutStack.js


import React from "react";
import About from "../screens/about";

const AboutStack = createStackNavigator();
export default function myStacks() {
return (
<AboutStack.Navigator initialRouteName="GameZone" headerMode="screen">
<AboutStack.Screen
name="About"
component={About}
options={{ title: "About GameZone" }}
/>
</AboutStack.Navigator>
);
}


drawer.js

import React from "react";
import AboutStack from "./aboutStack";
import HomeStack from "./homeStack";

const RootDrawerNavigator = createDrawerNavigator();

export default function App() {
return (
<NavigationContainer>
initialRouteName="GameZone">
<RootDrawerNavigator.Screen name="Home" component={HomeStack} />
<RootDrawerNavigator.Screen name="About" component={AboutStack} />

</NavigationContainer>
);
}


App.js

import React, { useState } from "react";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";
import Navigator from "./routes/drawer";

export default function App() {
const getFonts = () => {};
let [fontsLoaded, setFontsLoaded] = useFonts({
"nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"),
"nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"),
});
if (fontsLoaded) {
console.log("fonts loaded");
return <Navigator />;
} else {
console.log("loadingfonts");
return <AppLoading />;
}
}

Make sure you have the same paths. Otherwise, change it.

[nahom.g.g]

The draw Navigator is not working for me, I don't know whether it is because the version conflict

[majdkalthoum]

I wish you could update this course as most of the stuff are outdated and it's getting really frustrating to keep up with this course and at the same time looking for the right implementation.

[ahmetbcakici]

i solved all problems about nesting navigators with React Navigation package 5.x version:
this repo can help you with solving problems, because the structure changed some

[kevinreynaldo]

i just learned react native last month just from documentation only and it gets confusing about these react navigation stack thing. Thankfully i just found ur react native videos last day and already watched all of it. Thank you man for making this simple and easy to understand.

[markowiecky]

Great course, I wish I started this few monts before. There was few changes in React-navigation and part of your material is outdated. It's very anoying looking for tips or solutions in comment section.
If someone is looking for working drawer.js file, here is mine:
import React from 'react';

import { HomeStack } from './homeStack'
import { AboutStack } from './aboutStack';

const Drawer = createDrawerNavigator();

export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeStack} />
<Drawer.Screen name="About" component={AboutStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}

[Lerndemy]

please make new series on react native

[baranates]

This react native changes too frequently... The createStackNavigator() function doesn't take any arguments now, the video is deprecated :(

[sylvielmna]

React Native 5.x+ changes according to:

See comments on the previous videos for other changes.

# Install the new package
yarn add @react-navigation/drawer

# drawer.js

import React from 'react';









    </Navigator>
  )


  <NavigationContainer>
    <RootDrawerNavigator />
  </NavigationContainer>
)


# aboutStack.js, homeStack.js

[Lerndemy]

Those who are facing problem with latest version - Enjoy !

Drawer.js

import * as React from "react";
import Home from "../screens/Home";
import About from "../screens/About";
import homeStack from "./homeStack";
import aboutStack from "./aboutStack";

const Drawer = createDrawerNavigator();

export default function Navigator() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={homeStack} />
<Drawer.Screen name="About" component={aboutStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}


aboutStack.js

import * as React from "react";
import { View, Text } from "react-native";
import About from "../screens/About";

const Stack = createStackNavigator();

function aboutStack() {
return (

<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "tomato",
height: 70,
},
headerTintColor: "white",
}}
>
<Stack.Screen
name="About"
component={About}
options={{ title: "About Gamezone" }}
/>

</Stack.Navigator>

);
}

export default aboutStack;


homeStack.js

import * as React from "react";
import { View, Text } from "react-native";
import Home from "../screens/Home";
import ReviewDetails from "../screens/ReviewDetails";

const Stack = createStackNavigator();

function homeStack() {
return (

<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "tomato",
height: 70,
},
headerTintColor: "white",
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{ title: "Home" }}
/>
<Stack.Screen
name="ReviewDetails"
component={ReviewDetails}
options={{ title: "Review Details" }}
/>
</Stack.Navigator>
);
}

export default homeStack;


App.js


import React, { useState } from "react";

import AppLoading from "expo-app-loading";
import { useFonts } from "expo-font";
import Navigator from "./routes/Drawer";

export default function App() {
let [fontsLoaded] = useFonts({
Nunito: require("./assets/fonts/Nunito-Regular.ttf"),
Nunito_Bold: require("./assets/fonts/Nunito-Bold.ttf"),
});

if (!fontsLoaded) {
return <AppLoading />;
} else {
return <Navigator />;
}
}




package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~41.0.1",
"expo-app-loading": "^1.0.3",
"expo-font": "~9.1.0",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"~1.10.2",
"react-native-reanimated": "~2.1.0",
"3.2.0",
"react-native-screens": "^3.0.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
},
"private": true
}

[kelseyfecho]

Thank you for this awesome tutorial, you saved me hours and hours of reading/experimenting.

[kristinaramljak]

The createStackNavigator() function doesn't take any arguments now.
New drawer.js code:

import React from 'react';







    return (
      <NavigationContainer>



        </Drawer.Navigator>
      </NavigationContainer>
    );
  }

[pranaydas]

can you implement this tutorial using react navigation v5 ?

[saugaatallabadi]

UPDATE: do "npm install react-native-screens" as well (or yarn add react-native-screens)

[kritikasrivastava]

Your explanation is so clear.Please do more React Native project tutorials.🎉

[erensrtky]

bro could you upload your next tutorials little bit fast :d i cant wait

[Natokserialcom]

It just make things so clear, I spent almost 2 days by reading the API docs, and watching and reading different tutorials, But never get clear than this

[iamdhruvcool]

i faced an issue where there was a conflict in react-navigation-drawer and it's dependency react-native-reanimated, so to fix that you should rename interpolate to interpolateNode in and then it should work fine.

[realtorBG]

npm install @react-navigation/drawer this is in new version

[CelestialCadences]

*** This is version 4 of react navigation for those who may not know! ***
It's very important to mention that you are using react navigation v4 ...as a noobie this would throw me off big time and cost me days trying to sort through different examples wondering what is going on.