You’re doing React Native Routing wrong - Expo File-Based Routing 😱
ฝัง
- เผยแพร่เมื่อ 31 ก.ค. 2024
- With the new Expo Router, you can use file-based routing for mobile applications, something previously only seen on the web! Let's explore how the file-based routing for React Native apps with the Expo router works and why it's a powerful way to build cross-platform apps.
🔥 Learn React Native FAST: galaxies.dev/reactnative
#############################
👨💻 Want to read instead of watch?
Here's the full tutorial: galaxies.dev/react-native-fil...
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join the Simonics Facebook group:
/ simonics
#############################
00:00 Stack Layout Navigation
06:31 Display a Modal
11:23 Tab Bar Layout
19:47 Nested Layouts
24:48 Deep Linking with File-Based Routing - วิทยาศาสตร์และเทคโนโลยี
Become a Stellar React Native dev @ galaxies.dev 🚀
Thanks for the video Simon. I've been googling how this works for 2 hours... This cleared up so much.
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 ✌️
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.
Very informative video. Would love to see more expo related videos
Yes more Expo & RN content coming over the next time 💪
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 ?
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
May I ask what the extension you are using for the `rnf...` snippets? Seems useful! Thanks in advance
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?
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)
This is a tremendous video. well done!
Thank you!
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
This is so easy with the file based navigation 😮!
Yeah it's really epic!
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.
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!
I got stuck implementing shared elements I can't figure it with expo router
Thx for sharing 🎉❤
Thanks for watching!
Deep link is not working expo router 3,
it always opening the index only
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?
That's usually not a good idea with URLs, and should be solved differently like maintaining the state somewhere else
Simon tell me how to use Capacitor in Flutter to generate the APK
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.
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?
It's the iOS simulator I usually use
Hey, great tutorial. What extension are you using where its predicting what code youre going to write? Thanks
That’s GitHub Copilot
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?
Sounds strange, have you tested on Android devices before?
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?
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!
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??
Firebase auth was down for almost 4 hours yesterday..so think about how critical auth is for your app!
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
Thank you!!
Great tutorial, any idea how expo router would work with firebase dynamic links deep linking
Haven't done that yet, but good idea to look at!
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
yeh. this is a big problem for me too. i don't understand why react navigation have this approach.
Working on this right now as I found it really interesting - we need to swap a few things around!
@@galaxies_dev
Would love to see your result
Thanks
الفيديو احترافي جدا و رائع شكرا لك 😉
I guess...thank you? :D
@@galaxies_dev It says: "The video is very professional and wonderful. Thank you."
what is the use of file based routing if we are going to use stack i dont get it
You get unified routing also for the web, and the setup of files is usually easier (especially when using TS)
Is there any best example to use Tabs and drawer together in a same layout
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!
I'd also like to see how this is done. There doesn't seem to be a good example of this
@@galaxies_dev can't wait for it ^^ in fact I did that already, but having some issues with this approach
More like Expo Routing rather than React Native routing? or am I missing something here....
Is it possible to do protective routes? I want to use firebase authentication with this.
if you get that to work please respond
I will look into this!
Just use context or sum, lol
@@JEsterCW Why lol?
Then what are we doing wrong ?
Can i use react query for Expo Router project?
Yes, working on a course for Galaxies already!
4:00 - You just wrap the link with pressable... thats how official template implements it.
Yes!
Can you tell more aboht rnfe function that kina a interesting for more productivity
It's just a VSC extension for React snippets!
Can you use it with react-native-web? I couldn't 😅
With Expo you can build for the web as well :)
Haha broo! You start well and then starts to get messy afterwards 😫
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...
Most likely some caching issue or wrong folder structure - all things work just fine for me with latest Expo Router!
How I use expo-auth with router
Read the doc, it contains examples
How we can hide tabs on [id] screen
You might have to restructure your files in that case to have [id] above the level of the tabs layout!
@@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}
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
Sorry to hear - here is another fresh video about exactly that: th-cam.com/video/4-shpLyYBLc/w-d-xo.html
Get gud, lmao
@@JEsterCW What's gud?
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.
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!
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.
😅 is not good
Why?
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.
Thanks for the tips - how would you name the files differently?
bad tutorial
very bad
Thanks for your feedback - what do you think could be improved?