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

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 92

  • @vitalityofmind5864
    @vitalityofmind5864 Год назад +9

    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.

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

  • @voyagersansvousruiner
    @voyagersansvousruiner Год назад +4

    This is so easy with the file based navigation 😮!

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

  • @JEsterCW
    @JEsterCW Год назад +2

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

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

  • @frankfu1122
    @frankfu1122 7 месяцев назад

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

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

  • @roni_castro
    @roni_castro 29 дней назад

    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

  • @RonanThomas
    @RonanThomas 10 месяцев назад

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

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

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

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

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

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

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

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

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

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

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

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

  •  Год назад +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.

  • @carlosmedrano8596
    @carlosmedrano8596 4 месяца назад

    Then what are we doing wrong ?

  • @Matheus_1582
    @Matheus_1582 Год назад

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

  • @startup_dream
    @startup_dream 9 месяцев назад

    This is a tremendous video. well done!

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

  • @teknologene
    @teknologene Год назад

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

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

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

  • @mohamethseck
    @mohamethseck Год назад +1

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

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

  • @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: ruclips.net/video/4-shpLyYBLc/видео.html

    • @JEsterCW
      @JEsterCW Год назад

      Get gud, lmao

    • @nerd_abroad
      @nerd_abroad Год назад

      @@JEsterCW What's gud?

  • @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 :)

  • @capricorn.engineering
    @capricorn.engineering 11 месяцев назад

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

  • @frankfu1122
    @frankfu1122 7 месяцев назад +1

    Thx for sharing 🎉❤

  • @nhatduyle4825
    @nhatduyle4825 Год назад

    Can i use react query for Expo Router project?

    • @galaxies_dev
      @galaxies_dev  Год назад

      Yes, working on a course for Galaxies already!

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

  • @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."

  • @mohammedtahabmt3256
    @mohammedtahabmt3256 Год назад

    How I use expo-auth with router

    • @fruitypie
      @fruitypie Год назад +1

      Read the doc, it contains examples

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

  • @galaxies_dev
    @galaxies_dev  Год назад

    Become a Stellar React Native dev @ galaxies.dev 🚀

  • @Rex88282
    @Rex88282 Год назад

    😅 is not good

  • @emporteme
    @emporteme Год назад +1

    bad tutorial
    very bad

    • @galaxies_dev
      @galaxies_dev  Год назад +1

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