Тёмный

Migrating from React Navigation to Expo Router 

Simon Grimm
Подписаться 93 тыс.
Просмотров 9 тыс.
50% 1

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

Наука

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

 

7 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 41   
@galaxies_dev
@galaxies_dev 4 месяца назад
Join Galaxies.dev today - the Home of the Best React Native content🚀
@littlejacob3491
@littlejacob3491 4 месяца назад
expo router is a game changer thank you Simon
@galaxies_dev
@galaxies_dev 4 месяца назад
Really like it too!
@ahmadaccino
@ahmadaccino 4 месяца назад
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
@galaxies_dev 4 месяца назад
Agree, the transition should feel smooth
@uiuxengineer
@uiuxengineer 4 месяца назад
Thank you so much Simon! Great work
@galaxies_dev
@galaxies_dev 4 месяца назад
Thank you!
@samirtagizade703
@samirtagizade703 4 месяца назад
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
@galaxies_dev 4 месяца назад
Yeah give it a try in new apps!
@FaysalBDev
@FaysalBDev 3 месяца назад
super amazing... hope it goes smooth :D
@galaxies_dev
@galaxies_dev 3 месяца назад
I hope so too!
@rahulkathayat8542
@rahulkathayat8542 4 месяца назад
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
@galaxies_dev 4 месяца назад
Sure can talk about that - also have a full course on it on Galaxies: galaxies.dev/course/expo-modules
@praweewongsa
@praweewongsa 4 месяца назад
thank you bro
@galaxies_dev
@galaxies_dev 4 месяца назад
You're welcome!
@ShortCodeDev
@ShortCodeDev 4 месяца назад
🎯 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
@msrajawat298 2 месяца назад
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.
@ytlagu2010
@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-mm4kl7sl3i
@user-mm4kl7sl3i 4 месяца назад
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
@galaxies_dev 4 месяца назад
It's Shades of Purple
@willyrosahuanca5884
@willyrosahuanca5884 4 месяца назад
Can u share the react navigation video about this so I can start from that.
@galaxies_dev
@galaxies_dev 4 месяца назад
I think it was this stream: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IhzrgITqOWE.html
@YashNandha
@YashNandha 4 месяца назад
Do we use the Expo router in traditional react native applications ( not expo )
@K.Huynh.
@K.Huynh. 4 месяца назад
I have the same question
@galaxies_dev
@galaxies_dev 4 месяца назад
I think right now Expo Router only works within Expo projects
@olimpioadolfo7498
@olimpioadolfo7498 4 месяца назад
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
@galaxies_dev 4 месяца назад
Sure, you just need multiple _layout files
@user-rq2im3nd7b
@user-rq2im3nd7b 3 месяца назад
Expo av video player, how can i achieve landscape mode ?
@Mr_Zeal1001
@Mr_Zeal1001 3 месяца назад
Yaa same problem, give me solution Simon
@bladbimer
@bladbimer 4 месяца назад
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
@galaxies_dev 4 месяца назад
Usually you should be fine with "router.replace" as it resets the view stack!
@bladbimer
@bladbimer 4 месяца назад
​​@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(); } };
@khalilbugti4079
@khalilbugti4079 4 месяца назад
React native cli or expo i am so confused any detail explain please.
@galaxies_dev
@galaxies_dev 4 месяца назад
Expo, see why here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-q-sKCsscIsc.html
@mhraihan7422
@mhraihan7422 4 месяца назад
can YOU make a vide how to implement native wind with the expo router, please?
@galaxies_dev
@galaxies_dev 4 месяца назад
Yes!
@mhraihan7422
@mhraihan7422 4 месяца назад
@@galaxies_dev it will be Very much helpful. I tried but could not configured.
@-uca--qe7ql
@-uca--qe7ql 3 месяца назад
Same issue, styles are not working with v4
@tayoadel5161
@tayoadel5161 24 дня назад
Still facing issues with this.
@vinitjain7
@vinitjain7 15 дней назад
couldnt see the tab entire video, your face was not that important
Далее
Build a Kids Drawing App with React Native
16:55
Просмотров 3 тыс.
Twitter Top Tabs Navigation with Expo Router
20:10
Просмотров 14 тыс.
Cabeças erguidas, galera! 🙌 Vamos pegá-la!
00:10
Просмотров 669 тыс.
What turned out better to repeat? #tiktok
00:16
Просмотров 1,7 млн
Expo Router | Beginner's Crash Course
49:26
Просмотров 12 тыс.
What’s the Best React Native Storage Option? 🧐
12:53
You might not need useEffect() ...
21:45
Просмотров 153 тыс.
Better than React Native Stylesheet 💪
24:03
Просмотров 8 тыс.
THE React Native Tech Stack for 2024 😎
13:52
Просмотров 39 тыс.
10 Must-Have React Native Components 😎
10:12
Просмотров 43 тыс.
Web Developer Roadmap (2024) - Everything is Changing
25:02