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

Подписаться 91 тыс.

Просмотров 32 тыс.

50% 1

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

Наука

Опубликовано:

13 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@vitalityofmind5864 Год назад

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

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

@geekthegeek730 Год назад

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

@galaxies_dev Год назад

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

@msrajawat298 3 месяца назад

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

This is so easy with the file based navigation 😮!

@galaxies_dev Год назад

Yeah it's really epic!

@User-gj9pb Год назад

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

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!

@startup_dream 3 месяца назад

This is a tremendous video. well done!

@galaxies_dev 3 месяца назад

Thank you!

@frankfu1122 2 месяца назад

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

@victorzerefos6557 Год назад

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

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

@kubilaybzk 11 месяцев назад

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 2 месяца назад

Thx for sharing 🎉❤

@galaxies_dev Месяц назад

Thanks for watching!

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

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)

@hushen 2 месяца назад

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

@pavithraos6978 11 месяцев назад

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

@carlotacb2703 6 месяцев назад

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?

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

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

@KingdomOrjiewuru 5 месяцев назад

That’s GitHub Copilot

@galaxies_dev 11 месяцев назад

Become a Stellar React Native dev @ galaxies.dev 🚀

@benbenzyhome 11 месяцев назад

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

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

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 9 месяцев назад

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!

@swp44744 11 месяцев назад

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

@galaxies_dev 11 месяцев назад

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

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

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

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

Yes!

@Matheus_1582 Год назад

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

@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 Год назад

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

@galaxies_dev Год назад

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

@davidadokuru8139 Год назад

@@galaxies_dev Would love to see your result Thanks

@user-xz5cm5ix1c 5 месяцев назад

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.

@blazi_0 Год назад

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

@galaxies_dev Год назад

Thank you!!

@Circuit-343 2 месяца назад

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 2 месяца назад

It's the iOS simulator I usually use

@anasalshlah2219 Год назад

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

@galaxies_dev Год назад

I guess...thank you? :D

@RusMiller Год назад

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

@alikassar 3 месяца назад

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 3 месяца назад

Sounds strange, have you tested on Android devices before?

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

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 7 месяцев назад

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

@rapepongpitijaroonpong1036 11 месяцев назад

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

@galaxies_dev 11 месяцев назад

It's just a VSC extension for React snippets!

@RatinTech Год назад

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

@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 10 месяцев назад

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

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

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

@mohamethseck Год назад

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

@carit.psicologo Год назад

if you get that to work please respond

@galaxies_dev Год назад

I will look into this!

@JEsterCW Год назад

Just use context or sum, lol

@RusMiller Год назад

@@JEsterCW Why lol?

@nhatduyle4825 11 месяцев назад

Can i use react query for Expo Router project?

@galaxies_dev 11 месяцев назад

Yes, working on a course for Galaxies already!

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

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

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

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

@mutluemre93 Год назад

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

@galaxies_dev Год назад

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

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

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

@teknologene Год назад

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

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

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 9 месяцев назад

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

@paul_e123 Год назад

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

Sorry to hear - here is another fresh video about exactly that: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4-shpLyYBLc.html

@JEsterCW Год назад

Get gud, lmao

@paul_e123 Год назад

@@JEsterCW What's gud?

@mohammedtahabmt3256 Год назад

How I use expo-auth with router

@fruitypie Год назад

Read the doc, it contains examples

@sandeepmaurya5262 11 месяцев назад

How we can hide tabs on [id] screen

@galaxies_dev 11 месяцев назад

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

@sandeepmaurya5262 11 месяцев назад

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

9 месяцев назад

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 9 месяцев назад

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 9 месяцев назад

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.

9 месяцев назад

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

@Rex88282 Год назад

😅 is not good

@galaxies_dev Год назад

Why?

@nickamountaineer9900 3 месяца назад

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 2 месяца назад

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