React Native Tutorial #24 - Drawer Navigation
ฝัง
- เผยแพร่เมื่อ 22 ธ.ค. 2019
- 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:
Course files - github.com/iamshaunjp/react-n...
🐱💻 🐱💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
![บุษบา - เมนทอล [Official MV]](http://i.ytimg.com/vi/IGnWPokSEis/mqdefault.jpg)
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.
I went through so many videos about react native navigation but it was so confusing, then I found your video yesterday and it's a blessing for new learners really. Thank you so much for these videos.
Thank you for this awesome tutorial, you saved me hours and hours of reading/experimenting.
Thanks, your explanation in all your video series is even clearer than the official docs
Thank you ! It was exactly what I needed, and it was easy to adapt your solution to my case. Through this awesome tutorial I undestood more about navigators !
Your explanation is so clear.Please do more React Native project tutorials.🎉
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
Excellent tutorial that is easy to follow due to your detailed and to-the-point explanation.
this is my favourite part of the series (as well as the Formik part)
Thank u so much and I can say we all hope for more React Native videos.
Can't wait for the next tutorial. Its like waiting for the next season of your favorite show. Happy holiday net ninja!
Thanks Justin, you too :)
Spend two days reading docs on react navigation trying to make correct drawer navigation with header. Pity i din't see this videos first, dispite i am your loyal fan. Your tutorials realy very helpfull! Thank you man!
And I have an idea of future React Native video. Combine this app with Mobx.
literally the best channel on the planet 🔥👏
The draw Navigator is not working for me, I don't know whether it is because the version conflict
Thanks man for such good explanation. Please upload further tutorials of React Native. Also could you include authentication and databases in this tutorial?
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.
Happy holiday shawn :) thanks for all your effort
Thanks, Happy New Year! :)
I love you Ninja. Great teacher.
Eagerly waiting for next part
Thank you very much sir , you provide execellent knowledge in videos and saved a lot of time to me
good sir
The net ninjaaaa!!! uuuuuuhhhhh!!! Bro please continue videos on RN, animation using re-animated, gestures using gesture-handler. And you may please make videos on minimum native side knowledge required for RN. Love you teaching
U r the best Teacher 🤞🤞
Best teacher ever
Thank you for your teachings. Probably this is the best channel in the Universe. I learned Django as well through your channel and its not a channel by the way, "It's an institution" 😃😊✌
Haha, thanks so much :)
Thanks, this is helping me create my real estate app
Thank you so much!
I love your tutorials. :)
Thank you! 😊
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 { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { HomeStack } from './homeStack'
import { AboutStack } from './aboutStack';
const Drawer = createDrawerNavigator();
export default function App() {
return (
);
}
+100 . Can you link the full directory. Most videos are outdated in this playlist
Thank you for sharing this!
Also if you are using the 6.x version of React Navigation you must install this:
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
and add in App on the top:
import 'react-native-gesture-handler';
Took me almost an hour to handle all the errors I was getting... Hope it is useful for someone else!
Is it just me or the new drawer already has a hamburger drawer header and the stack header and the drawer header are all on top of each other... How do u have only one header?
@@VS257 yeah mine too
Thanks Man :)
I started learning React Native, and struggling to find a well- organized content. Finally, l came across The Net Ninja, even l am follower of his channel. He did not surprised me honestly. He is the best of the best... Just hat off for this gentlemen how he prep the content, how he keep instruction short and clean with amazing wrap of every single video. I respect him a lot because of all.
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 "react-native/Libraries/Utilities/PixelRatio";
import { golbalStyles } from "../styles/global";
export default function ReviewDetails({ route, navigation }) {
const item = route.params;
return (
{item.title}
{item.body}
{item.rating}
);
}
**************
homeStack.js
**************
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
// import { NavigationContainer } from "@react-navigation/native";
import Home from "../screens/home";
import ReviewDetails from "../screens/reviewDetail";
const HomeStack = createStackNavigator();
export default function myStacks() {
return (
);
}
**************
aboutStack.js
**************
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
// import { NavigationContainer } from "@react-navigation/native";
import About from "../screens/about";
const AboutStack = createStackNavigator();
export default function myStacks() {
return (
);
}
**************
drawer.js
**************
import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import AboutStack from "./aboutStack";
import HomeStack from "./homeStack";
const RootDrawerNavigator = createDrawerNavigator();
export default function App() {
return (
);
}
**************
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 ;
} else {
console.log("loadingfonts");
return ;
}
}
Make sure you have the same paths. Otherwise, change it.
Thank you mate!
Wouldn't this have both Drawer header and Stack header on top of each other? I have the same code structure but my iOS simulator is showing the Drawer header, but the one in NetNinja doesnt have any Drawer hamburger header but mine does..... How do u have only one Header??
Thank you brother much appreciated because of you i can finally finish this course
not working
please make new series on react native
Excellent tutorial
Thanks for watching NC!
Thanks alot !
very help full lecture and kindly explain vue native and comparison it with react native and also share share your personal opinion which is best for android and ios app
Would very much like to see a series of tutorial videos on RN- Firebase data base examples , You are just Great.... But Please ! some videos on RN Firebase.....
bro could you upload your next tutorials little bit fast :d i cant wait
can you implement this tutorial using react navigation v5 ?
UPDATE: do "npm install react-native-screens" as well (or yarn add react-native-screens)
how to fix the error below?
Failed building JavaScript bundle.
Unable to resolve "react-navigation-drawer" from "routes\drawer.js"
Any chance you might also add authentication and/or database to this app in future videos?
Amazing course! Question: how to draw over other apps with a button (like floating action button of Facebook Messenger)? It is possible with expo?
React Native 5.x+ changes according to:
reactnavigation.org/docs/drawer-navigator/
See comments on the previous videos for other changes.
# Install the new package
yarn add @react-navigation/drawer
# drawer.js
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { HomeStack } from './homeStack';
import { AboutStack } from './aboutStack';
const RootDrawerNavigator = () => (
)
export const RootDrawer = () =>(
)
# aboutStack.js, homeStack.js
I'm really looking forward to see your Sails.js series.
All the Best.
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 react-navigation-drawer/lib/module/views/Drawer.js and then it should work fine.
Hello again, first of all, thank you very much for the material, it is excellent. I would like guidance so that Home and Review Screen are exclusively Stack and that DrawerNavigation is only shown on About screen
Awesome series!
My drawer doesn't collapse - whatever i do. Even tho i simply cloned the repo.
Any ideas?
Thanks for the tutorial but i am getting this error " Unable to resolve "./useValue" from "node_modules
eact-native-reanimated\src\Animated.jsl ". Any help will be appreciated
Really awesome tutorial. Could you please help? I need to change menu titles but i cant find the way. Any help
Could you please create a video about bottom navigation panel?
Hi all, First, Thank you very much for the awesome set of tutorials @The Net Ninja. Anyone know how to change the font size of the drawer by any chance. I want them to be bigger.
Is there a way to remove the gray ripple effect when you touch the drawer item?
thank you
*** 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.
The createStackNavigator() function doesn't take any arguments now.
New drawer.js code:
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeStack from './homeStack';
import AboutStack from './aboutStack'
const Drawer = createDrawerNavigator();
export default function App() {
return (
);
}
Hey, quick question: I did drawer exactly like you did in your video. Now, is there any way to apply custom styling to this drawer? The default look doesn't really fit to my project, so I would like to change it. Is there any way to do this or I need to rewrite my drawer completely?
Thanks in advance.
Pls kindly help me my drowmenu show ok but show up then doesn’t to see properly home and about
My drawer doesn't seem to go back to the home page. If we press the back button present in the phone, it goes back to the home page but if I press home on drawer, it doesn't go back. Any help?
ypeError: (0, _reactNativeScreens.useScreens) is not a function. (In '(0, _reactNativeScreens.useScreens)()', '(0, _reactNativeScreens.useScreens)' is undefined) I am gettimg this error?
Your tutorial is awesome. Thanks for this nice tutorial. I guess you use version 4.x navigation. I find 5.x is a bit easier. what do you think?
This react native changes too frequently... The createStackNavigator() function doesn't take any arguments now, the video is deprecated :(
I can't move forward because turns out react-navigation-drawer somehow doesn't work anymore, and I have to learn react-navigation 5 or 6 instead of 4. The difference is to great. But your curriculum is still great, I'm going to just jump to the lessons after navigation.
Pls help me how can down navigation home and about when click icon plz help me
Because don’t see properly home and about navigation
thank ninja for all of your tutorial
but this time I followed your tutorial and there was a problem on me. my page does not appear anything (stuck white) other than the default page
in console not show some error
I have the same error! Did anyone get a fix to this??
i faced the same issue,but then i realized i had a view tag in homestack.js and aboutstack.js ......remove the view tag and it will work
@@sambhavjain9566 i dont have view tag but still white screen
Hello, I am very novice, I have created two initial screens to work with stack without the drawer menu, but now I need that when fulfilling a condition the user goes to a third screen that can handle drawer navigation and can not return to the two initial screens, I do not know if I can explain...
Experimenting without conditions, create a third screen on the homestack, which had the and took me to a fourth screen that if I had the drawer navigation, but still had the scroll in the header back to screen two and one
Hello Shaun, would you please, when you have time, put out a series on Laravel, either on this channel or on Udemy? There are tons of great front-end framework serious here, appreciate it. But I do really want to get into Laravel, especially after taking your PHP/MySQL classes. I tried to find some good Laravel tutorials but a good one is hard to come by. Thank you
Hey, probably around the end of January I will doing a Lavarel course :)
Looking forward to it :)
import Home from "../routes/homeStack"; & import Home from "../routes/home"; whats the difference?
Hi i need some help The screen Get stuck in white if i change create app container to Homestack
EDIT: Now it became an error
I am not able to see the complete name in the drawer , please help
GOD Bless you .... E X C E L LE N T
Didn't work for me. Header showing and default home showing but when i try to drag the menu nothing comes out
This worked for me: software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html
Hey gang.... currently I am facing a problem with 'npm'... so the rule of thumb is when you are gonna install something related to react-native, use "expo" to install it.... for example.... use "expo install react-navigation-drawer" instead of npm install.... it saved me from error and it will automatically save it in your dependencies unlike npm when you need to write "--save" to save it in dependency
thank you...
Using expo for this just redirects to npm when I tried it.
@@iforce2d oh.... I quit react-native years ago... forgot everything I knew about expo
What should I do next
Can you make a pathway video to know how should we follow your playlist from your channel for every technology covered on your channel?
I did the same you have done in the video but i got an error of. Interpolate is not a function.. Please help.. Help will be highly appreciated.
The drawer code is old
Does this drawer navigation works on iOS 🤔
Hey Ninja
"Cannot read property 'configureProps' of undefined", i can't solve this
use react native v5 navigator: pass {route} then const item = route.params;
i solved all problems about nesting navigators with React Navigation package 5.x version:
github.com/ahmetbcakici/ReactNativeReviewApp
this repo can help you with solving problems, because the structure changed some
thank you, it was similar to mine, hope it doesn't cause any problems later
in your aboutStack.js file, you have
""
change "component={Home}" to "component={About}"
that way you can use the consistent routes import in your drawer.js file "import About from '../routes/aboutStack';"
thanks!
you saved my projects .Thank you :)
Thank you...! Ahmet
Sir please make another course for react Native bcz this one is out dated and can't find a better resource on TH-cam. And If possible plz connect a react native app with Firebase
Those who are facing problem with latest version - Enjoy !
------------------------------------------------------------------
Drawer.js
import * as React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
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 (
);
}
------------------------------------------------------------------
aboutStack.js
import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import About from "../screens/About";
const Stack = createStackNavigator();
function aboutStack() {
return (
);
}
export default aboutStack;
------------------------------------------------------------------
homeStack.js
import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import ReviewDetails from "../screens/ReviewDetails";
const Stack = createStackNavigator();
function homeStack() {
return (
);
}
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 ;
} else {
return ;
}
}
------------------------------------------------------------------
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-google-fonts/inter": "^0.1.0",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"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",
"react-native": "github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.1.0",
"react-native-safe-area-context": "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": {
"@babel/core": "^7.9.0"
},
"private": true
}
Not working
navigation drawer is not working with me any one can help
17:31
AppLoading threw an unexpected error when loading:
TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
inputRange: [PROGRESS_EPSILON, 1],
outputRange: [0, 1]
})', 'interpolate' is undefined)
Stack trace:
node_modules
eact-native\Libraries\LogBox\LogBox.js:148:8 in registerError
node_modules
eact-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
node_modules
eact-native\Libraries\LogBox\LogBox.js:33:4 in console.error
node_modules\expo\build\environment
eact-native-logs.fx.js:27:4 in error
node_modules\expo-app-loading\build\AppLoading.js:11:12 in startLoadingAppResourcesAsync._catch$argument_0
node_modules
eact-native
ode_modules\promise\setimmediate\core.js:37:13 in tryCallOne
node_modules
eact-native
ode_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
node_modules
eact-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
node_modules
eact-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
node_modules
eact-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
node_modules
eact-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
node_modules
eact-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
node_modules
eact-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
node_modules
eact-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
[native code]:null in flushedQueue
[native code]:null in callFunctionReturnFlushedQueue
...
the same
@@user-wq3pr3tz4p I fixed it by using navigation version 5
CAN WE Use Drawer Navigation and Stack Navigation together?
yes, you can, the video explained how to nest them.
4:15
Correction: Copy all of this "because I'm so lazy"....😁
In India we pronounce "Draweeerrr" to differentiate between "Draw" and "Drawer", british people pronounce same thing for both words. Britishers have made English language hard to learn LOL
showing error:
interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead
i have same error... cant fix it now :(
Same problem
Hi to anyone I need some Help is there anyone know how why there is error when i change my
export default createAppContainer(HomeStack) to expoert default Homestack
It is due to in React Navigation 5 we do not use Higher Order component to wrap Navigation
Refer Documentation example
It helps a lot
reactnavigation.org/docs/drawer-based-navigation/
@@thesage86 the sample doesnt work for me i also open it in expo.io but still dont load
@@jaysonlana9147 Try this I did it according to documentation
// ! Configuring Stack Navigator
//import { createStackNavigator } from 'react-navigation-stack';
//import { createStackNavigator } from '@react-navigation/stack';
// import { createAppContainer }from '@react-navigation/native';
import React from 'react';
//import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/Home';
import ReviewDetails from '../screens/ReviewDetails'
import Header from '../Shared/Header'
const HomeStack = ({navigation}) => {
const Stack = createStackNavigator();
return (
Styles the back button
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 20,
},
}}>
{/* // ! Whatever is first here will be shown as default Home screen so place ur HomeScreen on Top always */}
}}
/>
)
}
export default HomeStack;
npm install @react-navigation/drawer this is in new version
i'm doing this on 2020 , it works fine , but i can't swipe (right and left) , i dont know why
try this one github.com/react-navigation/react-navigation/issues/7536#issuecomment-540667009
@@amyra98 Thank you so much it worked for me
I got this error, any idea how can I fix it?
"Reanimated 2 failed to create a worklet, maybe you forgot to add reanimated babel plugin"
HI, i have same error how did you resolve this error.
Hello, I had issues on Drawer using sdk version 40, screen was not responding when I navigate and go back to home screen.
To solve this I had to implement a customDrawerContent and reset navigation every time I go back to home screen, I am posting this just in case it's useful to anyone else:
import React from "react";
import {View, TouchableOpacity, Text } from 'react-native';
import { createDrawerNavigator } from "@react-navigation/drawer";
import { MainStackNavigator, AboutStackNavigator } from "./stackNavigator";
function DrawerContent({navigation}) {
const navigate = (path) => {
navigation.navigate(path);
if(path === 'Home') {
navigation.reset({
index: 0,
routes: [{ name: 'Home' }],
});
}
}
return (
navigate('Home')} >
Home
navigate('About')} >
About
);
}
const Drawer = createDrawerNavigator();
export const DrawerNavigator = () => {
return (
} >
);
}
I am getting warning as: WARN %s: Calling `getNode()` on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release. ReactNativeFiberHostComponent
What should I do??
Did you figure this out?
*Update* 2023
Install package- npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated
In App.js -
First line of the file - import 'react-native-gesture-handler';
Then in drawer.js -
import 'react-native-gesture-handler';
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeNavigation from '../routes/homestack';
import AboutNavigation from '../routes/aboutstack';
const Drawer = createDrawerNavigator();
export default function Navigator() {
return (
);
}
If you are getting some weird errors - like Invariant Violation or something. Add this line in babel.config.js -
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'], //
can you provide aboutstack.js ?
My files look identical to yours, but I'm getting the following 2 errors. Any ideas?? (Yes, I'm opening from the correct folder. Also name is the same in app.json and package.json)
ERROR Error: Exception in HostFunction: expected 0 arguments, got 1,
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.,
@@Cardonfamily did you manage to solve it yet though?
@@firststrandtypename1866 Nope
Mate learn English first, and then learn to provide concise explanations, the use of dots at the end doesn't make any sense.
this vid is completely outdated. for new students, please go read the docs.
i realize that after 2 days working with this video uwu