Drawer Navigation in Expo Router Nested with Tab Navigator
HTML-код
- Опубликовано: 13 июн 2024
- In this tutorial, you'll learn how to create drawer navigation in expo router and how to create custom drawer navigator items. Also, in this tutorial, I've shown you how to create nested navigator with drawer navigator, tab navigator, and stack navigator. So this is the one-stop solution for all your expo router navigation related queries.
Introduction to Expo Router Tutorial • Introduction To Expo R...
Expo Router Tutorial Playlist • Expo Router
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
2:19 Installing Drawer Navigator Dependencies
3:44 Create Drawer Navigator with Tab Navigator
5:15 Create Custom Drawer Items
11:51 Adding Active Drawer Item Colors
15:51 Create Custom Component in Drawer to Show User Info
18:52 Customizing Header for the Screens within Nested Navigators
GitHub Repository URL github.com/itzpradip/basic-ex...
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/PDNTechnology
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/
Good tutorial. Thank you !
i like you did not avoid and did the more "complicated" cases. well done Pradip
Is it possible to have a LEFT & RIGHT drawer nav on one screen using expo router? I haven't seen anyone make a video on that yet
Great tutorial, thanks. I was particularly confused on how to hide the (tabs) drawer header but also show the current tabs screen header WITH the drawer toggle button. But you cleared that up by disabling the drawer header and just adding the drawer button to the headerLeft of the tab screen header.
Thanks for paying attention.
This was an absolutely fantastic tutorial. I am in the near future going to talk to an Expo representative regarding their docs. They want feedback.
I'd like to ask you, why is it that the (tabs) folder is inside of the (drawer) folder and not the other way around?
I tried doing it the other way around and did not get it to work.
Great example - Thanks for taking a more complex example as compared to others that do a simple drawer example.
Productivity Tip - Speed up video by 1.5 % and you can still follow along.
You're very welcome!
Thanks for your help, sir...
If it is possible then combine the previous React native tutorial series with the Nest Js backend.
Thanks for your comment & suggestion.
I don't know NestJS but I know NextJS and will create tutorials on it.
@@itzpradip Wow... it would be pretty much helpful for us... thank you, sir. You're great... we will be waiting...
hello man , i got a problem ... i want my drawer to be seperated from my welcome screen
Thank you @Pradip, I always follow your video to learn how to build Mobile App. Based on your experiences I have a question for newbie to start develop mobile app should I start with Flutter or React native?
There are a few things to consider before choosing the best technology for you. If you have web development background, then it would be good to go with react native, otherwise you can go with flutter. Learning curve is more in flutter than react native and with expo the development process is much more easier for react native.
@@itzpradip I am appreciated your guidance!
Thank you so much.. :)
You're welcome 😊
Hi Pradip, I am trying to have different bottom tab (icon / text) depending on the section. How can that be accomplished? Let say you have Cars & Houses for sale. When you go to the Cars section of your App, then you have 3 unique options as "Bottom Tabs" but if you go to the House section of your app then you may have 4 unique options as "Bottom Tabs" what I am trying to do is to give "tools / features" depending on the section of the app. I don't know how to accomplish this with expo-router, tabs and "stacks" (if that's its necessary) can you make something like that or can you give any tips?? thank you!!! Im following you. By the way, this video is amazing and complete! thank you!
How to use SVG sprites with positioning in a React native app
good tutorial. Thank you sir !
Thanks for your comment and support.
could you tell us how to use it in react native cli
It's expo router which is a feature of expo. If you're looking for navigation in react native cli then you can follow react navigation v6 tutorial playlist from here ruclips.net/p/PLQWFhX-gwJbmtZY4mcRE-k7hL9DigcGS-
could you share the code?
Updated the video description with github repo link. Please check it there.