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

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.

#############################

👨‍💻 Want to read instead of watch?

#############################

❤️ You can also find me on:

Or join the Simonics Facebook group:

#############################

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

[vitalityofmind]

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

[msrajawat]

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.

[JEsterCW]

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

[User-gjpb]

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.

[geekthegeek]

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

[voyagersansvousruiner]

This is so easy with the file based navigation 😮!

[ashwinnandihalli]

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?

[pavithraos]

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

[RonanThomas]

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

[frankfu]

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

[victorzerefos]

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?

[Circuit-]

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?

[alikassar]

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?

[mohamethseck]

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

[wizard_of_az]

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

[startup_dream]

This is a tremendous video. well done!

[RatinTech]

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

[blazi_]

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

[hushen]

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

[MohdSuhail-ce]

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.