#5 Drawer Navigation in React Native | React Native Tutorial | React Navigation Merge Stack & Drawer

Hello guys,

Check out this amazing cloud platform:
ZEGOCLOUD SDK provides easy video call SDK, voice call SDK, live streaming SDK and chat SDK for real-time interaction.
#zegocloud #uikits #sdk #api #react

In this video I have implemented drawer navigation in React Native. In the previous video we have implemented Stack Navigator, so in this I have merged Stack and Drawer so that we can work with both of them.
I have shown how to create custom drawer and how to style all of your drawer item.

Code:
Installation Steps:
#######Parent Package##########
npm install @react-navigation/native

######Gesture, layout and animations libraries########
npm install react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

#######Drawer########
npm install @react-navigation/drawer

#######Animated- Version 2 ##############
npm install react-native-reanimated@~2.2.0

plugins: ['react-native-reanimated/plugin'],

import 'react-native-gesture-handler';

npm i react-native-paper

##########################################
#reactnative #tutorial #javascript #coding #reactjs
Share the video with your friends. Subscribe me for more.
Thank You.

[adnanahmad]

good video (just for info install packages with "npm install "package-name" --legacy-peer-deps")
it'll automatically compatible with node and expo etc

[playerunknownbattlegraound]

This video is really helpful for me because I am new to learn React Native and I was struggle to use nesting navigation. Thanks a lot for this Video ❤

[silentstudios]

Absolutely on point. Great one, keep it up bro ❤

[abhishekrasall]

guys if u follow this video in july 2024, install latest npm install react-native-reanimated

[ManojKumar-xumh]

Very Good videos bro, good explanation. thanks for the quick response and solving the issue. Many thanks for the tips.

[VivekKedia-cy]

it gives following error :
> Task FAILED
139 actionable tasks: 110 executed, 29 up-to-date

BUILD FAILED in 4m 21s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug
Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. FAILURE: Build failed with an exception

i am not downloading the version 2 of reanimated as i checked the compatiblity table and it was not compatble with the version i am using for react native. what shoudl i do?

[pamsquad]

Bro I am getting the following error, I have tried many videos but this stuck stuck there:
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 wasn't called., js engine: hermes

[NayomiShah]

Hello, first of all thankyou very much. I am facing problem as I am using class component and also my stack navigator contains screen like login and sign-up where this drawer should not be used and also not all my screens should be displayed. Can you please help?

[mad_chief]

When drawer menu pressed it shoud overlay status bar..how to do it?

[ibronet]

Sir the lesson is okay but am stuck in createDrawerNavigator ist brings error like 'cannot read property 'createDrawerNavigator' of undefined' I Don know what to do

[palerkhenharold]

how can you add a background color for the active screen?

[alameenn]

when i install "npm install
it showing this: 1 high severity vulnerability
they are saying to upgrade the version to latest version

[PletraTech]

in react native how to achieve that label in the drawer to dynamically update to the name of the nested screen when a nested screen is opened, instead of displaying the name of the main drawer item. For example, if i navigate to the "Update Password" screen from the "Settings" screen, i want the drawer header to display "Update Password" instead of "Settings". can we achive this

[naveenkumarragupathy]

* What went wrong:
Execution failed for task
> Could not resolve all files for configuration
> Failed to transform (project :react-native-reanimated) to match attributes

how to clear this error bro

[motcongmotbangba]

10:30 he said: "and nyan" :3🙀🙀🙀

[tienphanmemtinh]

ERROR TypeError: Cannot read property 'hide' of null, js engine: hermes

[AvdheshKumarNigam]

How to run the app with error. OMG
Home, Home > Home
This can cause confusing behavior during navigation. Consider using unique names for each screen instead.

[codewithkaran]

Bro where is the css ? Please displayed the css part also
By the way great video 😊 one of the best video in youtube for Navigation keep it up bro ❤

[entertainershree]

react native notification with firebase related video banao na

[AvdheshKumarNigam]

Errors are showing.. you are install packages offline then we are facing issue. its not good practice. before u run own code. then upload videos. Please show your terminal window during the screen recording..