Migrating from React Navigation to Expo Router

You want to move from React Navigation to Expo Router v3 and enjoy file-based routing for React Native apps? Let's go through an actual code example to see how to migrate your React Navigation screens to Expo Router!
🔥 Learn React Native FAST: galaxies.dev
#############################
❤️ You can also find me on:
Twitter: / schlimmson
Instagram: / simongrimm_
#############################
00:00 React Navigation Example
00:52 Expo Router Manual Setup
03:30 Migrating React Navigation Tabs
05:33 Migrating a Modal
07:59 Migrating Routing from Code
11:15 Migrating Nested Stack Navigation
18:45 Benefits of Expo Router

[@galaxies_dev]

Join Galaxies.dev today - the Home of the Best React Native content🚀

[@littlejacob3491]

expo router is a game changer thank you Simon

[@galaxies_dev]

Really like it too!

[@ahmadaccino]

glad expo router didn't try to reinvent wheel when it comes to those navigation components even in v2. the best thing a framework can do for adoption is to make the api familiar

[@galaxies_dev]

Agree, the transition should feel smooth

[@uiuxengineer]

Thank you so much Simon! Great work

[@galaxies_dev]

Thank you!

[@samirtagizade703]

Great one Simon! expo router definetely looks like a go to navigation solution, I wanna try it on one of my projects now, lol

[@galaxies_dev]

Yeah give it a try in new apps!

[@FaysalBDev]

super amazing... hope it goes smooth :D

[@galaxies_dev]

I hope so too!

[@rahulkathayat8542]

Hey simon , can you please make a video on how to handle native modules in expo with expo-dev-client and how expo tackles the problem it used to face back in the day with native stuff

[@galaxies_dev]

Sure can talk about that - also have a full course on it on Galaxies: galaxies.dev/course/expo-modules

[@praweewongsa]

thank you bro

[@galaxies_dev]

You're welcome!

[@msrajawat298]

Hi Simon, I really liked your video.
Could help me here ?
I am working on expo router trying to develop android application. During development I Observe that if I am creating any new file it is showing in menu, like if I am using tab navigation using expo router and created a new file which is showing as menu in bottom tab. Similarly in drawer menu also.
Can anyone help me how I can fix that issue ?
However maybe it is default behaviour of expo router but I don't want to show each file in menu.

[@YashNandha]

Do we use the Expo router in traditional react native applications ( not expo )

[@K.Huynh.]

I have the same question

[@galaxies_dev]

I think right now Expo Router only works within Expo projects

[@willyrosahuanca5884]

Can u share the react navigation video about this so I can start from that.

[@galaxies_dev]

I think it was this stream: th-cam.com/video/IhzrgITqOWE/w-d-xo.html

[@user-mm4kl7sl3i]

I love your videos they have helped me a lot! I also love that vscode theme can you tell me it's name pls?

[@galaxies_dev]

It's Shades of Purple

[@ShortCodeDev]

🎯 Key Takeaways for quick navigation:
00:00 *🚀 Expo Router version 3 is discussed for migrating React Navigation applications.*
01:08 *🛠️ Manual installation of Expo Router involves adding packages and removing unnecessary ones like bottom tabs and Native stack.*
02:14 *📝 Configuration steps include updating the package.json, setting up an entry point, and modifying the Babel config.*
03:09 *🔄 Code cleanup involves removing unnecessary files and creating a new index.tsx file as the entry point.*
05:20 *📊 Creating a tab bar using Expo Router involves creating a layout file and adjusting the code for TS screens.*
07:46 *🚧 Nested layouts and headers are managed to resolve display issues.*
09:26 *🧩 Leveraging Expo Router's typed routes involves enabling type routes in app.json for improved code suggestions.*
16:52 *🌐 Navigation options include using the Link component or the router's push method with specified parameters.*
19:01 *🔄 Migrating from React Navigation to Expo Router offers benefits like type routes, bundle splitting, and simplified code structure.*

[@ytlagu2010]

Hey Simon, great video, one quick qn: that cool trick where you draw stuff on the screen, how do you do it? See timeline 13: 36

[@user-rq2im3nd7b]

Expo av video player, how can i achieve landscape mode ?

[@Mr_Zeal1001]

Yaa same problem, give me solution Simon

[@olimpioadolfo7498]

Why expo router is so confusing. Is it possible to use the Stack, Drawer and Tabs navigation on a single app using Expo router?
It is very possible using React Navigation but with expo router is so confusing

[@galaxies_dev]

Sure, you just need multiple _layout files

[@khalilbugti4079]

React native cli or expo i am so confused any detail explain please.

[@galaxies_dev]

Expo, see why here: th-cam.com/video/q-sKCsscIsc/w-d-xo.html

[@bladbimer]

Hi everyone, does anyone have an idea on how to cleanly resest the history using this ? I just want to ensure the user can't click on back button mostly during authentication phase such as account creation and logout. Thanks for your help :) if anyone knows.

[@galaxies_dev]

Usually you should be fine with "router.replace" as it resets the view stack!

[@bladbimer]

​​@galaxies_dev thank you for your reply. Well my understsnding of replace was that it replaces the current page history but it maintained the previous history. I did find a way potentially using something like:
import { Router } from 'expo-router';
export const clearHistory = (router: Router) => {
while (router.canGoBack()) {
router.back();
}
};

[@mhraihan7422]

can YOU make a vide how to implement native wind with the expo router, please?

[@galaxies_dev]

Yes!

[@mhraihan7422]

@@galaxies_dev it will be Very much helpful. I tried but could not configured.

[@-uca--qe7ql]

Same issue, styles are not working with v4

[@tayoadel5161]

Still facing issues with this.

[@vinitjain7]

couldnt see the tab entire video, your face was not that important