Expo Router Drawer Navigation with Custom Menu

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 พ.ย. 2024

ความคิดเห็น • 58

  • @davidebranchi1997
    @davidebranchi1997 10 หลายเดือนก่อน +9

    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
      @Flash136 10 หลายเดือนก่อน +2

      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
      @galaxies_dev  10 หลายเดือนก่อน

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

    • @MarlonEnglemam
      @MarlonEnglemam 6 หลายเดือนก่อน

      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
    @MrMads-yi2hh 6 หลายเดือนก่อน +3

    I love this video and this is my first comment on TH-cam video in 8 years.

    • @dustbin-l6f
      @dustbin-l6f หลายเดือนก่อน

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

  • @artofthesystem4419
    @artofthesystem4419 5 หลายเดือนก่อน

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

  • @SandraWantsCoke
    @SandraWantsCoke 8 หลายเดือนก่อน +1

    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)

  • @DeakonJim
    @DeakonJim 10 หลายเดือนก่อน +5

    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
      @webinnovsystems หลายเดือนก่อน +1

      hie did you manage to get video on that?

  •  2 หลายเดือนก่อน

    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.

  • @ghislainmitahi2584
    @ghislainmitahi2584 3 หลายเดือนก่อน

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

  • @codeBUG1534
    @codeBUG1534 10 หลายเดือนก่อน

    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
      @galaxies_dev  10 หลายเดือนก่อน

      Sure, any specific topic you want to see?

    • @akshayakumarsoraganvi3659
      @akshayakumarsoraganvi3659 8 หลายเดือนก่อน

      @@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

  • @davidlintin
    @davidlintin 2 หลายเดือนก่อน +1

    How do we change the open drawer button icon?

  • @khuslenuujii2761
    @khuslenuujii2761 8 หลายเดือนก่อน

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

  • @michaelseaman7020
    @michaelseaman7020 6 หลายเดือนก่อน

    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

  • @EliZevin
    @EliZevin 7 หลายเดือนก่อน +1

    thank you for this.

    • @galaxies_dev
      @galaxies_dev  7 หลายเดือนก่อน

      No problem 😊

  • @jasonyap8535
    @jasonyap8535 9 หลายเดือนก่อน +2

    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
      @alvaro12449 8 หลายเดือนก่อน

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

    • @MarlonEnglemam
      @MarlonEnglemam 6 หลายเดือนก่อน +1

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

  • @CC-xv7hf
    @CC-xv7hf 5 หลายเดือนก่อน

    great tutorial, thank you!

  • @korajagdish6209
    @korajagdish6209 10 หลายเดือนก่อน

    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🙂🙂.

  • @hirol2052
    @hirol2052 4 หลายเดือนก่อน

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

    • @galaxies_dev
      @galaxies_dev  3 หลายเดือนก่อน

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

  • @Juju-ch5it
    @Juju-ch5it 5 หลายเดือนก่อน +1

    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
      @psychotechtutorials 4 หลายเดือนก่อน

      I think it will result to an error

    • @Juju-ch5it
      @Juju-ch5it 4 หลายเดือนก่อน

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

  • @HaraldPliessnig
    @HaraldPliessnig 4 หลายเดือนก่อน +1

    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
      @galaxies_dev  4 หลายเดือนก่อน +1

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

    • @HaraldPliessnig
      @HaraldPliessnig 3 หลายเดือนก่อน

      @@galaxies_dev thx :)

  • @abelmurua6980
    @abelmurua6980 9 หลายเดือนก่อน +1

    Amazing videos!

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 4 หลายเดือนก่อน +1

    Thank you so much

    • @galaxies_dev
      @galaxies_dev  4 หลายเดือนก่อน

      You are welcome!

  • @Fact___Frenzyy
    @Fact___Frenzyy 4 หลายเดือนก่อน

    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
      @albertomunoz964 4 หลายเดือนก่อน

      Solo escríbelo así :

  • @JokeBookGames
    @JokeBookGames 10 หลายเดือนก่อน +1

    How does it look on web :o

  • @darkemperor9006
    @darkemperor9006 หลายเดือนก่อน

    can i use drawer navigation alongside tab navigation?

  • @amanrohilla4435
    @amanrohilla4435 10 หลายเดือนก่อน

    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.

  • @gmartins-dev
    @gmartins-dev 10 หลายเดือนก่อน

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

  • @anthonyzammit4088
    @anthonyzammit4088 6 หลายเดือนก่อน

    How do i remove a drawer screen from the drawer?

  • @zenobiusztasak8604
    @zenobiusztasak8604 8 หลายเดือนก่อน +1

    You look so cool with that mustache!

    • @galaxies_dev
      @galaxies_dev  8 หลายเดือนก่อน

      Haha thanks!

  • @TonyMontana-ji7om
    @TonyMontana-ji7om 3 หลายเดือนก่อน

    How to implement redux with expo routes

  • @davidsosa5940
    @davidsosa5940 6 หลายเดือนก่อน

    how can I have that mobile screen?

  • @MarlonEnglemam
    @MarlonEnglemam 6 หลายเดือนก่อน

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

  • @LukaJovanovic-bt6fr
    @LukaJovanovic-bt6fr 6 หลายเดือนก่อน

    How can i get drawer open/closed state

    • @galaxies_dev
      @galaxies_dev  6 หลายเดือนก่อน

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

  • @chaitanyasondur8483
    @chaitanyasondur8483 9 หลายเดือนก่อน

    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
      @galaxies_dev  9 หลายเดือนก่อน

      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!

  • @alvaro12449
    @alvaro12449 8 หลายเดือนก่อน +2

    SCROLL DO NOT WORK WHY?

  • @adeelshhid
    @adeelshhid 10 หลายเดือนก่อน +1

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

  • @fallanstar
    @fallanstar 10 หลายเดือนก่อน

    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