You’re doing React Native Routing wrong - Expo File-Based Routing 😱

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 92

  • @vitalityofmind5864
    @vitalityofmind5864 Рік тому +8

    Thanks for the video Simon. I've been googling how this works for 2 hours... This cleared up so much.

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Yeah it's still early days, so glad I could help!
      If you enjoyed it, maybe you can share the channel with your RN colleagues ✌️

  • @msrajawat298
    @msrajawat298 8 місяців тому

    During watching you videos, I was thinking how to say thanks to you. you way of explanation really too awesome, because of as I am only prefer the watching video in Hindi, but during watching your video I did't face any challenge to understanding the whole concepts.
    I am again saying that I don't know how to say thanks. you are really awesome.
    I appreciate your efforts.
    Thankyou being a part of my learning journey.

  • @voyagersansvousruiner
    @voyagersansvousruiner Рік тому +4

    This is so easy with the file based navigation 😮!

  • @User-gj9pb
    @User-gj9pb Рік тому +5

    Good tutorial, this seems way more intuitive than react navigation. Having to figure out nesting navigators and then how to handle routing for those nested navigators seems really overcomplicated if you just want a UI element for drawer, tabs etc. throughout your app. File based routing seems like it solves some of that weirdness.

    • @galaxies_dev
      @galaxies_dev  Рік тому

      It requires a bit different thought process, but I also do like the file based approach a lot - and it's super helpful if you actually also build a web version!

  • @JEsterCW
    @JEsterCW Рік тому +2

    4:00 - You just wrap the link with pressable... thats how official template implements it.

  • @geekthegeek730
    @geekthegeek730 Рік тому +4

    Very informative video. Would love to see more expo related videos

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Yes more Expo & RN content coming over the next time 💪

  • @victorzerefos6557
    @victorzerefos6557 Рік тому +1

    Sr. your tuts are amazing thank you very much for your time! One thing that I've been trying but didn't get through was that on how to pass the whole object through Links?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      That's usually not a good idea with URLs, and should be solved differently like maintaining the state somewhere else

  • @RonanThomas
    @RonanThomas 10 місяців тому

    Hey, great tutorial. What extension are you using where its predicting what code youre going to write? Thanks

  • @frankfu1122
    @frankfu1122 7 місяців тому

    May I ask what the extension you are using for the `rnf...` snippets? Seems useful! Thanks in advance

  • @roni_castro
    @roni_castro 28 днів тому

    It looks easy, but after developing for some days using expo-router I had a lot of issues with nested stack, duplicated headers, different behaviors on Android and iOS, one show the back button, the second one don't... If you don't have nested headers, it might work, otherwise, it's going to be painful :)

  • @blazi_0
    @blazi_0 Рік тому +1

    This shortcut ignores the copilot suggestion and shows the regular autocomplete suggestions for u:
    Ctr + space in windows
    İ use this all the time, especially when using typescript it helps alot

  • @ashwinnandihalli3961
    @ashwinnandihalli3961 Рік тому +1

    This is great tutorial. Than you.
    I am not able to figure out how can we add a hamburger menu or drawer in the tabs(home screen) the menu should over lap tabs and home screen. Can you help?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      You probably need to restructure the layout files and groups to have one on top of the other - will try to work on another video about that!

  • @pavithraos6978
    @pavithraos6978 Рік тому +1

    The modal has not been working on android, is there any other way to implement it easily without turning back to react native's navigator

  • @Circuit-343
    @Circuit-343 8 місяців тому

    What's the IDE / dev stack being used here? I haven't found any way to build and simulate iOS apps on the screen while using RN?

    • @galaxies_dev
      @galaxies_dev  8 місяців тому

      It's the iOS simulator I usually use

  • @alikassar
    @alikassar 8 місяців тому

    Thanks this works really nicely for me on iOS, but when I publish my app for the Android the tabs don't click nicely, and sometimes they don't even respond once tapped on, any thoughts?

    • @galaxies_dev
      @galaxies_dev  8 місяців тому

      Sounds strange, have you tested on Android devices before?

  • @davidadokuru8139
    @davidadokuru8139 Рік тому

    Great video
    Something that I was wondering, what if I want the tabs removed from the list detail page. So the list details page is full and doesn’t have anything at the bottom

    • @AliYasir5247
      @AliYasir5247 Рік тому +1

      yeh. this is a big problem for me too. i don't understand why react navigation have this approach.

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Working on this right now as I found it really interesting - we need to swap a few things around!

    • @davidadokuru8139
      @davidadokuru8139 Рік тому

      @@galaxies_dev
      Would love to see your result
      Thanks

  • @startup_dream
    @startup_dream 9 місяців тому

    This is a tremendous video. well done!

  • @swp44744
    @swp44744 Рік тому

    Great tutorial, any idea how expo router would work with firebase dynamic links deep linking

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Haven't done that yet, but good idea to look at!

  • @wizard_of_az
    @wizard_of_az Рік тому

    Is there a way to use a shared layout component across every tab? I'd like to have my wrap every screen within all my tabs (instead of recreating the same code in every file)

  • @yourjhay
    @yourjhay 4 місяці тому

    Deep link is not working expo router 3,
    it always opening the index only

  • @nemila4904
    @nemila4904 Рік тому

    Firebase auth or Clerk? Which one should I use? I know it depends on the use case but when do you think it is to use Clerk over Firebase??

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Firebase auth was down for almost 4 hours yesterday..so think about how critical auth is for your app!

  • @kubilaybzk
    @kubilaybzk Рік тому

    I have a question, before start the Deep Linking with File-Based Routing section Projects.
    When we go to User Page and click logout links.
    We have to be in index.tsx page right ?
    When I press the back button which is on the phone button. we go to the profile.tsx again how can we fix this issue ?

  • @frankfu1122
    @frankfu1122 7 місяців тому +1

    Thx for sharing 🎉❤

  • @carlosmedrano8596
    @carlosmedrano8596 3 місяці тому

    Then what are we doing wrong ?

  • @Matheus_1582
    @Matheus_1582 Рік тому

    Simon tell me how to use Capacitor in Flutter to generate the APK

  • @carlotacb2703
    @carlotacb2703 11 місяців тому

    Hey! I'm having one problem, and it's that the /_sitemap is not taking the _layout, it shows the different routes independent as the layout does not exist. Do you know how to fix it?

  • @RatinTech
    @RatinTech Рік тому

    Is there any best example to use Tabs and drawer together in a same layout

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Don’t have a tutorial about it yet, but it simply depends on whether you want same side menu on all tabs or different ones, and then either having the parent use the drawer or have the tabs layout above the drawer!

    • @edsonshivuri2954
      @edsonshivuri2954 Рік тому

      I'd also like to see how this is done. There doesn't seem to be a good example of this

    • @lolekakaa
      @lolekakaa Рік тому

      @@galaxies_dev can't wait for it ^^ in fact I did that already, but having some issues with this approach

  • @hushen
    @hushen 8 місяців тому

    Is there any way to create nested routes under tabs but I don't want to show bottom tabs below
    For example like whatsapp have bottom tab but when we go to detail page we don't see bottom tab

  • @benbenzyhome
    @benbenzyhome Рік тому

    I got stuck implementing shared elements I can't figure it with expo router

  • @kakun7238
    @kakun7238 Рік тому

    what is the use of file based routing if we are going to use stack i dont get it

    • @galaxies_dev
      @galaxies_dev  Рік тому

      You get unified routing also for the web, and the setup of files is usually easier (especially when using TS)

  • @rapepongpitijaroonpong1036
    @rapepongpitijaroonpong1036 Рік тому

    Can you tell more aboht rnfe function that kina a interesting for more productivity

    • @galaxies_dev
      @galaxies_dev  Рік тому

      It's just a VSC extension for React snippets!

  • @mohamethseck
    @mohamethseck Рік тому +1

    Is it possible to do protective routes? I want to use firebase authentication with this.

  • @mutluemre93
    @mutluemre93 Рік тому

    Can you use it with react-native-web? I couldn't 😅

    • @galaxies_dev
      @galaxies_dev  Рік тому

      With Expo you can build for the web as well :)

  • @nhatduyle4825
    @nhatduyle4825 Рік тому

    Can i use react query for Expo Router project?

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Yes, working on a course for Galaxies already!

  • @teknologene
    @teknologene Рік тому

    More like Expo Routing rather than React Native routing? or am I missing something here....

  • @MohdSuhail-c9e
    @MohdSuhail-c9e 11 місяців тому

    if anyone has any idea about this let me know, I'm trying to open the drawer from the bottom navigation, my drawer is nested in the bottom navigation.

  • @capricorn.engineering
    @capricorn.engineering 11 місяців тому

    Haha broo! You start well and then starts to get messy afterwards 😫

  • @anasalshlah2219
    @anasalshlah2219 Рік тому +1

    الفيديو احترافي جدا و رائع شكرا لك 😉

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      I guess...thank you? :D

    • @RusMiller
      @RusMiller Рік тому

      @@galaxies_dev It says: "The video is very professional and wonderful. Thank you."

  •  Рік тому +3

    Expo Router is _not_ production ready, albeit v2 would indicate that. I made the mistake assuming this. Beware before you try to build anything more complex that has more than one type of navigator.
    For example: You can't do shared routes within a group. initialRoute isn't working if the route's inside a tabs hierarchy, instead you need to resort to using Redirects. Relative navigation isn't possible either. The docs are limited and Expo devs close valid issues with no solutions to these real-life scenarios. I'm personally going back to React Navigation, might give Expo Router a new chance in a couple of years once it has matured.

    • @galaxies_dev
      @galaxies_dev  Рік тому

      I guess it has some bugs here and there for special cases, but that doesn't mean it's not production ready yet - it works for many companies & apps already very well!

    • @Baconbrix
      @Baconbrix Рік тому

      Expo Router is built on top of React Navigation, any fundamental issues in router will also be present in React Navigation. Expo Router v1 was production-ready enough for the Kick app, which grew to be #5 in the App Store. Please open issues with reproducible examples so I can investigate more.

    •  Рік тому

      @@Baconbrix I've pointed out the things I struggled with. I had no problem implementing what I needed using React Navigation when I went back to it. I'd advise to check the Expo Router issues that you have closed to see what developers are struggling with.
      I love Expo in general, and want to express my deepest gratitude towards the hard work you're doing, but Expo Router is something I'm going to give new chance in some later project when it's more mature. Right now I have deadlines to meet and don't have time to try to figure out if I'm "holding it the wrong way" or if it's a bug.

  • @GeorgeFlorian12
    @GeorgeFlorian12 Рік тому

    It's funny how not even the most basic example works anymore with Expo SDK 49 and Expo-Router v2...
    I am trying the most basic example of routing and it can't find me any match...

    • @galaxies_dev
      @galaxies_dev  Рік тому

      Most likely some caching issue or wrong folder structure - all things work just fine for me with latest Expo Router!

  • @sandeepmaurya5262
    @sandeepmaurya5262 Рік тому

    How we can hide tabs on [id] screen

    • @galaxies_dev
      @galaxies_dev  Рік тому

      You might have to restructure your files in that case to have [id] above the level of the tabs layout!

    • @sandeepmaurya5262
      @sandeepmaurya5262 Рік тому

      @@galaxies_dev Hey man thanks for your reply.
      I have figured out to achieve that result by
      1- simply add a condition in layout file, that if pathname== "${pathname} add tabBarStyle {display:none}.
      Or There is a simple solution
      2 - Include [id].tsx in tabs layout and set options {href:null}

  • @galaxies_dev
    @galaxies_dev  Рік тому

    Become a Stellar React Native dev @ galaxies.dev 🚀

  • @nerd_abroad
    @nerd_abroad Рік тому +3

    man, expo-router has such terrible documentation. All I want to do is put a tab bar on my app. It's taken me like 3 hours and I still have bugs. F***ing sucks

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Sorry to hear - here is another fresh video about exactly that: ua-cam.com/video/4-shpLyYBLc/v-deo.html

    • @JEsterCW
      @JEsterCW Рік тому

      Get gud, lmao

    • @nerd_abroad
      @nerd_abroad Рік тому

      @@JEsterCW What's gud?

  • @mohammedtahabmt3256
    @mohammedtahabmt3256 Рік тому

    How I use expo-auth with router

    • @fruitypie
      @fruitypie Рік тому +1

      Read the doc, it contains examples

  • @Rex88282
    @Rex88282 Рік тому

    😅 is not good

  • @nickamountaineer9900
    @nickamountaineer9900 8 місяців тому

    Your videos are great, I've watched a few now as I am just learning React Native. A couple things... You go way to fast, too much copy/paste without explaining what you are doing. Slow down brother. Also, I've noticed in all your videos that your file naming is horrific. I know this is just a demo but you are promoting bad habits. I'm going to guess you've never worked in a corporate environment or with a team of developers. Other than that your videos are the best.

    • @galaxies_dev
      @galaxies_dev  8 місяців тому

      Thanks for the tips - how would you name the files differently?

  • @emporteme
    @emporteme Рік тому +1

    bad tutorial
    very bad

    • @galaxies_dev
      @galaxies_dev  Рік тому +1

      Thanks for your feedback - what do you think could be improved?