Expo Router Drawer Navigation From the Docs
HTML-код
- Опубликовано: 26 июн 2024
- Expo Router Drawer Navigation From the Docs - Working With Expo Router v2 File Based Routing
#expo #reactnative #react
This is the third in a series of videos I am doing on expo router file based routing. I will be covering basic routing and dynamic routes along with Drawer Navigation in this video.
📺 You can review Stack Navigation in the first video - • Expo Router Stack Navi...
📺 You can review Tab Navigation in the second video - • Expo Router Tab Naviga...
📺 Drawer Navigation With Nested Tabs - • Expo Router Drawer Nav...
Most of the work I have done with the new router started with the basic two-tab template. I wanted to give the Drawer a try, there is no template so I needed to dig into the docs and figure it out
I decided to do these videos starting from scratch, adding expo router to a basic expo application, and following along with the documentation as I build the application. This video is perfect for beginners who want to learn how to use Expo Router Drawer Navigation. By the end of this video, you'll have everything you need to start using Expo Router Drawer Navigation right away!
I hope you will join me on this journey and share the content with friends and associates.
💥 Sign Up For Our Newsletter - buff.ly/3lAk2jL
💥 Chapters
--------------------------
00:00 - Intro and Expo Router Documentation Issues
01:04 - Create Expo App Project & Install Packages
02:53 - Make Changes To Files To Support Expo Router and Drawer Navigation
05:15 - Test Run To Make Sure It's Installed Properly
05:38 - What Does Documentation Tell Us Next?
05:50 - Adding The Drawer Navigation UI
08:00 - Adding First Menu Item / Navigation Stack In Our Drawer
10:36 - Adding Second Menu Item / Navigation Stack In Our Drawer
12:31 - Add Menu Button For Opening Drawer and Correct Page Titles
16:50 - Adding swipeEdgeWidth to keep the user from swiping to open
17:20 - Adding Some Basic Styling To UI
18:27 - Add Icons to Drawer Menu Items
20:27 - Add NextPage Navigation to Home Drawer Stack
22:31 - Wrap Up
💥 Links
--------------------------
- Expo Router Doc - docs.expo.dev/routing/install...
- Expo Router Drawer Doc - docs.expo.dev/router/advanced...
- React Navigation Drawer Documentation - reactnavigation.org/docs/draw...
💥 Social Media
--------------------------
Twitter - / aaronksaunders
Facebook - / clearlyinnovativeinc
Instagram - / aaronksaunders
Dev.to - dev.to/aaronksaunders
#reactnavigation #reactnativetutorial #exporouter expo router v2 beginners
If you enjoyed the content you can help support the channel, consider hitting the THANK YOU button
Video is all most a year now but was very help full thank you alot
Yeah all of these are due for an update
@@AaronSaundersCI Still very helpful i could not understand the documentation this was the only video i understood
@@AaronSaundersCI I watched both videos for the drawer and the tabs
I really appreciate you’re taking the time to explain the documentation. Sometimes it is kinda hard to understand when you’re new. Keep it up!
I think that since it is new, they just put out the minimal and there is an expectation that you have some domain knowledge. I just wanted to break it down to make it easier for folks.
Glad you found it helpful, please like and subscribe 🙏🏾
life saver! :)
Glad it was helpful!
Excellent videos. keep dropping these..like that you dont assume or skip steps..
Thanks for your awesome description, really it saved my day. I think you deserve to have more subscription
Thanks for the sub! - and I agree!! Please recommend the channel to others and share/retweet the videos
Thank you, this is very useful
I'm glad you found it useful! Let me know if you have any other questions.
This saved hours of work.. Thank you sir
You're welcome!
Thank you abut this video! I think I’ll be able to finally solve what I wanted. I just couldn’t understand how to control the titles. Coming from Next.js new routing system I can’t tell that this is a mess. There are just some things between the drawers and tabs that can’t make it compatible when working them together. Hopefully this expo router improves in the future. It has no logic to have to not shown title in the parent then inside again declared another screen and show the title. Can you have one with drawer and tabs? Again thank you!!
(auth) would have been what I 'm after
hay Aaron,
just curious what if i created a custom header for this drawer how do i add it to the root file to get rendered on all screens instead of individually adding them for each screen.
Thanks for the great video. Just one question, do you know if it's possible to integrate the Expo Router Drawer + Stack together?
I want to have Stack navigation so that users can go back to the previous screen by clicking the Back Arrow Icon in the top left section of the header bar.
At the same time, I also want users to have the ability to summon a Drawer (settings, logout) with the Drawer icon located in the top right section of the header bar.
Yes you can!
Hi, how can I move the icon of the drawer on my right side? And how can I put maybe a settings icon or simply change an icon? there is so poor documentation expo routing, thanks for your videos they are gold! :)
The router and from expo router still works?
yes, but this video is from a earlier versio
hi, I wanna know what if I want to use both tabs and drawer in the same page. How can I do?
Yes you can, I am working on a quick video to show that
*HERE YOU GO -* ruclips.net/video/CgALgzNaFyo/видео.html
thanks a lot . this is really helpful
May I inquire if you are familiar with the process of hiding drawer items in expo-router/drawer?
I know it is possible to change the href to null to make tab.screen not shown on the tabs. Is there some similar way to make this in drawer? thanks
How do I show my own content inside the drawer? :/ I don't want navigation links inside a drawer
create custom drawer content, take a look at the React Navigation documentation. Expo router is just a layer on top of React Navigation
how to make the drawer only available open at home page ? assume that behaviour is like modal compoent
- click button
- show drawer
- inside the drawer there are list menu.
- click on list menu item (let say profile page)
- goto profile page
- click back on profile page
- back to home page (drawer still opened)
It depends how you architected you app
I get a weird experience on android where the top bar leaves a white space from the top. Any one experiencing the same?
Please can i get source code , i need to explicitly understand it 🙏🙏🙏🙏🙏🙏
source code in all in the blog post - dev.to/aaronksaunders/expo-router-drawer-navigation-from-the-docs-231k