Expo Router Drawer Navigation with Custom Menu

[@davidebranchi1997]

Since I develop for mobile apps I have always used React-Navigation. Watching your videos I started playing around with Expo Router and I'm having so much fun that I risk missing some work deliveries 😂 Great channel anyway, keep up the good work!

[@Flash136]

Expo Team is really doing a great job making mobile development fun and easy, with all the new updates they've been releasing.

[@galaxies_dev]

So happy to hear, but make sure work get's done 😂

[@MarlonEnglemam]

so true lol. I've been experimenting a lot on my own projects instead of investing the same effort into the work deliveries

[@MrMads-yi2hh]

I love this video and this is my first comment on KZbin video in 8 years.

[@dustbin-l6f]

it'sworld recored. give him him awared lol lol lol...

[@artofthesystem4419]

Love these videos Simon! Thank you so much, learning so much about Expo!

[@DeakonJim]

I want to use both stack and drawer, can you make a video on that please? I’ve looked at the docs but I seriously cannot understand it. I have a custom header component I’m using in the stack screens, and want to also use custom drawer component for the drawer.

[@webinnovsystems]

hie did you manage to get video on that?

[@ghislainmitahi2584]

Et Voilà Simon!😁😆 Thank you for the video

[@davidlintin]

How do we change the open drawer button icon?

[@codeBUG1534]

Sir this was an amazing video on the topic I wanted on react native. So, i want to request to make more interesting videos on Expo React native 😊

[@galaxies_dev]

Sure, any specific topic you want to see?

[@akshayakumarsoraganvi3659]

@@galaxies_dev Can you make one video how to handle expo router in real time project which includes, stack navigation, tab navigation, drawer navigation, if we click on any screen, bottom tab nav bar should not show and more important is with proper folder structure, and last point to hide specific bottom tab bar we are using href: null, same case how to handle in drawer navigation

[@SandraWantsCoke]

For me Drawer content NEVER hot reloads (even using just react navigation without expo router), I always have to manually CTRL+R. And if your drawer like mine is nested deep inside some protected route, you can think how annyoing it is to constantly navigate towards that place only to find out that things are misaligned and you have to CTRL+R again (CMD+R mac)

Very Good Tutorial, specially but one Thing: 1. The screens seems empty, without text, and theres text inside in my Case 2. Is there a way to avoid changing path on URL with Web? With the older method Drawer from React Native vanilla, It allows not to change the URL on URL bar on navigator. 3. Is there a way to make a Custom Header Bar or App Bar? Ive tried to passing by ScreenOptions to a new CustomAppBarComponnent without results.

[@EliZevin]

thank you for this.

[@galaxies_dev]

No problem 😊

[@zenobiusztasak8604]

You look so cool with that mustache!

[@galaxies_dev]

Haha thanks!

[@jasonyap8535]

I tried this but it didn't work. I've got all my imports correct, and the same code you have in your layout file but at 2:25 where the drawer menu appears, mine never shows up. Been trying to get it to work for days but have not succeeded. Compiles with no errors but I'm left with just a white screen.

[@alvaro12449]

verifica que esten correcto el nombre de los archivos en particular de _layout.tsx. Lo tenia con el nombre de layoutS.tsx🤯

[@MarlonEnglemam]

the same is happening to me! Did you ever figure out what was wrong?

[@aymenbachiri-yh2hd]

Thank you so much

[@galaxies_dev]

You are welcome!

[@Juju-ch5it]

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

[@psychotechtutorials]

I think it will result to an error

[@Juju-ch5it]

@@psychotechtutorials I was actually able to get it to work by nesting a drawer in another. Its a little jenky but works

[@michaelseaman7020]

I see you've posted that the source code is in the blog post, but could you just post a link? Thank you for your videos

[@CC-xv7hf]

great tutorial, thank you!

[@abelmurua6980]

Amazing videos!

[@galaxies_dev]

Thanks!

[@HaraldPliessnig]

i have a (stack) folder in my drawer but don‘t wanna see the (stack) as a menu item in the drawer. can i switch that off? with something like itemShown: false or such a thing???

[@galaxies_dev]

Usually you can set the href: null in the options of Stack.Screen to hide a page!

[@HaraldPliessnig]

@@galaxies_dev thx :)

[@khuslenuujii2761]

Hi, using drawer with modal having some issue when opening modal, behind screen shows thats drawer section

[@darkemperor9006]

can i use drawer navigation alongside tab navigation?

[@galaxies_dev]

Yes :)

[@hirol2052]

CustomDrawerContent is not updating automatically when changes are made, every time need to refresh the simulator ?

[@galaxies_dev]

Yeah that's why I initially had all of the code in one file and later created a custom component from it!

[@JokeBookGames]

How does it look on web :o

[@korajagdish6209]

Hey Simon. i have a query, am working on mobile applications, so i want to build Angular-ionic (Capacitor) project and it should be totally offline with sql lite database. Can u please suggest me how the process should be and what all should i want to install for the perfect working of the project. Thanks in advance🙂🙂.

[@gmartins-dev]

What is the emulator config(phone/api etc...) you are using please?

[@Fact___Frenzyy]

I don't why but my drawer shows like login/index! I want it to display only login instead. hat can be the reason?

[@albertomunoz964]

Solo escríbelo así :

[@anthonyzammit4088]

How do i remove a drawer screen from the drawer?

[@amanrohilla4435]

Can you please make a video on how to make a reorderable/sortable/draggable flatlist in react native similar to a organisable queue in music player app. I've surfed the web but couldn't find anything performant.

[@davidsosa5940]

how can I have that mobile screen?

[@TonyMontana-ji7om]

How to implement redux with expo routes

[@MarlonEnglemam]

no matter what I do the content doesnt show up in the menu! Is anyone stuck with the same issue?

[@LukaJovanovic-bt6fr]

How can i get drawer open/closed state

[@galaxies_dev]

There is a hook from React Navigation you can use: reactnavigation.org/docs/drawer-navigator/#checking-if-the-drawer-is-open

[@alvaro12449]

SCROLL DO NOT WORK WHY?

[@chaitanyasondur8483]

I am getting this error. Can anyone help me with this please? ReanimatedError: Tried to synchronously call a non-worklet function on the UI thread. Possible solutions are: a) If you want to synchronously execute this method, mark it as a worklet b) If you want to execute this function on the JS thread, wrap it using `runOnJS`, js engine: reanimate

[@galaxies_dev]

You are trying to call your JS code inside Reanimated code (worklets) that are executed on the native side of your project - that's what this issue usually means!

[@adeelshhid]

Get back your beard man. By the way I'm watching you since 2019

[@fallanstar]

Hey sir plz make one Full stack chat audio or video app in React native with socket,node js in react native CLI plz sir plz with typescript plz sir take your time and buid this amazing project am waiting for your response thanks