Migrating from React Navigation to 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!

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

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

[@eliecersmora5931]

Thank you brother. Now I undertand how to do it

[@galaxies_dev]

You are most welcome

[@praweewongsa]

thank you bro

[@galaxies_dev]

You're welcome!

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

[@willyrosahuanca5884]

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

[@galaxies_dev]

I think it was this stream: kzbin.info/www/bejne/f5ndo5p_idaCjac

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

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

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

[@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: kzbin.info/www/bejne/p17WfHapqMh8qcU

[@nikihl-s2k]

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

[@Mr_Zeal1001]

Yaa same problem, give me solution Simon

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

[@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(); } };

[@ExpoDev_Dash]

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

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

[@uiuxengineer]

Thank you so much Simon! Great work

[@galaxies_dev]

Thank you!