Тёмный

Learn Expo Router - Complete Tutorial 

Cosden Solutions
Подписаться 87 тыс.
Просмотров 57 тыс.
50% 1

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will learn about Expo Router in React Native. Expo Router is a file-based routing solution for React Native that's built on top of React Navigation. It provides an easy way to handle routes in your React Native applications and offers a wide range of features such as Stack Navigators, Bottom Tabs Navigators, and so much more!

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

 

27 ноя 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 135   
@cosdensolutions
@cosdensolutions 3 месяца назад
Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react
@serdar.d
@serdar.d Месяц назад
This is the simplest and the smoothest explanation of the Expo Router. Thank you 🙏🏼
@czuka1520
@czuka1520 6 месяцев назад
This is my ultimate Expo Router tutorial! Thanks so much for making this!
@matkomilic8382
@matkomilic8382 24 дня назад
Went from React Navigation to Expo Router today and this tutorial totally got me going, thanks!
@Lykkos29
@Lykkos29 7 месяцев назад
Thanks for this!, I will check it later, just letting you know your explanation and code snippets are super understandable 💯🤙
@deepmistry3114
@deepmistry3114 3 месяца назад
Crystal clear description. Thanks a lot!
@Noone-bb5qh
@Noone-bb5qh 6 месяцев назад
Thank you so much brother for this video. You made me understand the navigation so easily, which other blogs made so hard to understand. Thank you!
@e-jahman
@e-jahman 3 месяца назад
Started building out mobile apps from my day 2 of learning react native. What gave me the advantage was my grounded know how of reactjs. Seeing this video just gives me the knowledge I need to handle navigations with expo
@jijieats
@jijieats 6 месяцев назад
Loved this tutorial! I would really love more react native tutorials! Keep it up
@emmanueloni2147
@emmanueloni2147 6 месяцев назад
Thank you for this. It was really explanatory and simple to learn, now the docs makes sense 😁. Weldone 👍👍
@LewraAzad
@LewraAzad 4 месяца назад
Thanks for the tut and love the way you say router!!
@nehat786
@nehat786 7 месяцев назад
Sir we badly expect a react native from you. The way you explain is awesome.
@ramblingsofadegenerate1174
@ramblingsofadegenerate1174 17 дней назад
Best tutorial yet !!!!!!!!!!! I just got started with dev your tutorial is truly the best man
@MrAlao675
@MrAlao675 7 месяцев назад
This is awesome ❤. For a user of nextjs... You covered the whole React Native in less than 25 minutes. I have to save this for later.
@_SABARIVASANS-cy7qw
@_SABARIVASANS-cy7qw 3 месяца назад
This video was really helpful and gave me a better understanding of the router. Thanks and keep making good content
@bugrakaraaslan8556
@bugrakaraaslan8556 3 месяца назад
exactly what I was looking for, Thanks!
@joaquinrodriguez7100
@joaquinrodriguez7100 2 месяца назад
Nice tutorial, it was really clear to me. Thank you!
@felipecabreira4321
@felipecabreira4321 7 месяцев назад
Love your videos man ! Great tutorial
@abubokor6853
@abubokor6853 2 месяца назад
This is the what i actually need. Thank You SIr.
@ronallan8680
@ronallan8680 5 месяцев назад
Hey that was Great dude! Really clear and succinct. Thnams!
@rukacruxer1474
@rukacruxer1474 4 месяца назад
best tutorial on expo router 👏
@irontarkus9701
@irontarkus9701 5 дней назад
thank you very much, this is way better than the official documentation
@ROVAKAN
@ROVAKAN 6 месяцев назад
i zapped almost 50 tutorial videos on youtube. And this is the video that i need. It's like an answer from a friend. Straight to the point.
@cosdensolutions
@cosdensolutions 6 месяцев назад
glad you found it useful!
@Yaw_Dev
@Yaw_Dev 2 месяца назад
I totally agree. Same here. I'm like finally someone simply explained what the heck is going on. I like how he goes straight to the point. That's how you get Fellow, Like, Save and all the above. Cosden, thanks for making this video.
@serdar.d
@serdar.d Месяц назад
SAME!
@ROVAKAN
@ROVAKAN Месяц назад
@@serdar.d kolay gelsin kanka :)
@serdar.d
@serdar.d Месяц назад
@@ROVAKAN 😄😄 eyvallah hocam sana da
@FriendsExplanation
@FriendsExplanation 2 месяца назад
You just made my day 🌼. Thank for the video. It is helping junior developers like me.
@SamtheSWE
@SamtheSWE Месяц назад
Thank you so much for this video!
@hardheart3336
@hardheart3336 12 дней назад
Thanks for this video! ❤❤❤
@gaddp
@gaddp 2 месяца назад
super helpful. thanks!!
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
Can you please make more react native stuff please.
@cosdensolutions
@cosdensolutions 7 месяцев назад
Yes will do ☺️
@GolderiQ
@GolderiQ 3 месяца назад
@@cosdensolutionsit’s been for months 🥲 Do you use Apple silicon? How well does it all work with Expo, React native, etc..?
@yassinekader8308
@yassinekader8308 3 месяца назад
thanks man you helped me a lot :)
@nitsanbh
@nitsanbh 5 месяцев назад
Folder-based routing is a GAME CHANGER
@DorgadoPlays1
@DorgadoPlays1 3 месяца назад
Thank you very much bro! helped me to resolve a problem in my App
@mariusbora4470
@mariusbora4470 4 месяца назад
very good and useful info, thank you for making this tutorial!
@DatDat59
@DatDat59 7 месяцев назад
I follow you because I know more react native than react js, this is so cool to see a react native video !
@cosdensolutions
@cosdensolutions 7 месяцев назад
Will do more of them ☺️ I'm also a rn dev
@nfaical3
@nfaical3 7 месяцев назад
Thanks 👍, hope you make more tutorials.
@dickydarmawan4790
@dickydarmawan4790 7 месяцев назад
Thanks for the tutorial👍.
@danielflorencio9661
@danielflorencio9661 7 месяцев назад
More React Native and Expo, please! 👀
@ahmadrami14
@ahmadrami14 4 месяца назад
Thanks for the Tutorial
@freeinformation7877
@freeinformation7877 3 месяца назад
Thank you so much, I really appreciate it.
@saqibmuhammad7218
@saqibmuhammad7218 7 месяцев назад
Video mean alot for me. ❤
@culturapoliticaycomputador9999
@culturapoliticaycomputador9999 5 месяцев назад
Thanks for this useful video.👍
@h.t.8812
@h.t.8812 4 месяца назад
really good video!
@martrom0
@martrom0 2 месяца назад
Thanks man !!
@SomeRandom3DArtist
@SomeRandom3DArtist 4 месяца назад
Great video👍
@brawnie3969
@brawnie3969 28 дней назад
thanks for the video.
@spare4337
@spare4337 4 месяца назад
The simplest one thanks
@user-pk4ni3tv7l
@user-pk4ni3tv7l 4 месяца назад
you the Goat
@Smongo412
@Smongo412 2 месяца назад
Long time react native dev here. 1. When things work, be thankful, but skeptical. 2. When things don't work, turn off and on again
@JohnWickXD
@JohnWickXD 2 месяца назад
Could you please help me 👀 I am getting "cannot read property 'useMemo' of null error and app doesn't work (although before changing the package.json, it was working!)
@Smongo412
@Smongo412 2 месяца назад
@@JohnWickXD do you use git? Can you go back to before you made the change? Did you remove some package and run npm install? It means you are calling useMemo on something that is null.
@amralimohamed6497
@amralimohamed6497 7 месяцев назад
A like even before i watch the video😊
@kratos-oi7sz
@kratos-oi7sz 7 месяцев назад
A video on how to setup a turborepo with expo and nextjs please 🤞🤞
@BukkyOdunsi
@BukkyOdunsi 5 месяцев назад
too good
@emeryd7432
@emeryd7432 Месяц назад
Thanks a loooooooooooooooooooooooooooooooooooooooooooooot !
@lukemontana9792
@lukemontana9792 3 месяца назад
great
@MJ-vx5cz
@MJ-vx5cz 7 месяцев назад
Please make more advanced react native videos
@yucanli2957
@yucanli2957 3 месяца назад
amazing tutorial! Wondering would you like to share some of your extension used in vsc? I found the autofill function is very useful!
@cosdensolutions
@cosdensolutions 3 месяца назад
have a whole vid on my vscode setup
@syeedimtiaz2974
@syeedimtiaz2974 29 дней назад
Please complete the playlist !
@VirtualVibesMusic
@VirtualVibesMusic 3 месяца назад
👍👍👍👍👍👍👍👍👍👍👍👍👍👍 great stuff
@uhN0id
@uhN0id Месяц назад
Just a heads up, if you're on Expo SDK 50 or higher you no longer need to make the babel config change. It's all merged into the existing babel-preset-expo.
@HMS_55
@HMS_55 5 месяцев назад
🙌🙌🙌
@rolloooo
@rolloooo 3 месяца назад
Hey man, is there a way to have two sets of tabs and screens to be swapped via Firebase authentication. Like if user is authenticated, it would swap to a different set of tabs. Great tutorial btw! Cleared out many things for me
@SuperPlex99339
@SuperPlex99339 3 месяца назад
When I use the expo router I am unable to make the status bar translucent. It always shows.
@Juju-ch5it
@Juju-ch5it Месяц назад
Is it possible to have a LEFT & RIGHT drawer nav on one screen using expo router? I haven't seen anyone make a video on that yet
@renekutter7562
@renekutter7562 7 месяцев назад
Hey, good tutorial, but I would have liked a little more on the topic of nesting. I keep trying to create a tab navigation where a screen contains a stack navigation. However, the stack navigation menu items should not be displayed in the tab navigation. In the navigation tab there should be a “Settings” tab in which several menu items are displayed. I would be super grateful if you could explain this briefly, because I can't find anything about it on the internet.
@cosdensolutions
@cosdensolutions 7 месяцев назад
Yeah I totally get it, but this was meant to be a beginner tutorial to teach the basics. However, it shouldn't be too difficult to have a stack of screens as one of the tabs. Try replacing in my example code the home screen with a stack and give it 2 screens and see how it behaves. I'm 100% sure you can figure it out without too much trouble :D
@lucdina5118
@lucdina5118 2 месяца назад
The problem I have with expo router is for ex I wanted to stay on index page and navigating through the details page but the issue is, expo creates automatically a new item on bottom tabs and I don’t really want this behavior.
@msrajawat298
@msrajawat298 2 месяца назад
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.
@paysnug4470
@paysnug4470 6 месяцев назад
the page inside tab.screen background is not showing something overlay it
@budiman-kr5ug
@budiman-kr5ug 5 месяцев назад
16:33 get overrided or nested (parent layout still exists and wrapping the child layout)?
@vinitjain7
@vinitjain7 12 дней назад
i want group tabs how to do that.. like home can have multiple navigations not necessarily tabs..
@h.t.8812
@h.t.8812 4 месяца назад
just one question, does anyone know of a list for TabBarIcons we can use? I tried using from a general react native list and it didn't work
@dogdev
@dogdev Месяц назад
There are about 100 Stack.Screens in the file in layout.tsx, can I keep them or how can I split them?
@nikhilnagar3253
@nikhilnagar3253 5 месяцев назад
liked it
@greenshaheen6716
@greenshaheen6716 6 месяцев назад
how can i use it in react-native expo bare project?
@saim4556
@saim4556 Месяц назад
well you can use rnfe instead of rjsfc
@atnguyenucchi9776
@atnguyenucchi9776 5 месяцев назад
i think this work on simple way, i have try app -> (tabs) -> (drawer). So when I in drawer I cant navigate to screen in app
@omarms3341
@omarms3341 2 дня назад
how to make the headerTile dynamic since its [id] at first place
@vyankateshmiskin9618
@vyankateshmiskin9618 6 месяцев назад
'cannot GET /URL' error on refresh with React Router how to fix this?
@PetersExcapades
@PetersExcapades 5 месяцев назад
I keep getting TypeError: Cannot read property 'isReady' of undefined, js engine: hermes and have no idea why, anyone know?
@50kT
@50kT 3 месяца назад
Problem with tabs is it seems to take away the animation too
@harag9
@harag9 7 месяцев назад
Great video thanks for this. What keyboard did you get?
@cosdensolutions
@cosdensolutions 6 месяцев назад
Ergodox EZ
@yourgflikesit
@yourgflikesit 5 месяцев назад
Why did you move the users folder into the (tabs) folder? Was that required?
@cosdensolutions
@cosdensolutions 5 месяцев назад
because I wanted it to be a whole tab, so everything within it is its own stack
@benjaminkissa9100
@benjaminkissa9100 4 месяца назад
can do a toturial to change it to apk file for android
@yahyeabdullahinuur5247
@yahyeabdullahinuur5247 7 месяцев назад
Please make video of typescript with react i'm eager to use permanently typescript instead of javascript in my react code
@abelmurua6980
@abelmurua6980 5 месяцев назад
Amazing! i just started with react native 2 days ago. This is great. How do you get the preditect text (when typing) ? its like telling you whats coming next.. whats the extension?
@cosdensolutions
@cosdensolutions 5 месяцев назад
github copilot :D
@abelmurua6980
@abelmurua6980 5 месяцев назад
How much do you recommend it? lol github copilot vs chatgpt? @@cosdensolutions
@cosdensolutions
@cosdensolutions 5 месяцев назад
I use it quite a lot, so I would recommend it. They're both the same but copilot runs in your vscode which makes it way more convenient
@2gbeh
@2gbeh 6 месяцев назад
WOW
@hubesh716
@hubesh716 7 месяцев назад
please start react native projects or Tutorial
@mishen-thakshana
@mishen-thakshana 6 месяцев назад
How did you instantly change ' ' to `` when putting ${}
@cosdensolutions
@cosdensolutions 5 месяцев назад
I have an extension for that :D check out my vscode vid
@shaz101
@shaz101 3 месяца назад
I used the "npx create-expo-app@latest --template tabs@50" recommended by expo and got completely screwed but this tutorial explained everything SO WELL! THANK YOU!!!
@mma-dost
@mma-dost 3 месяца назад
Please bring a react native project
@maddyIncubus
@maddyIncubus 7 месяцев назад
Dude a little confused about (tabs). You say it will not appear in url but it can be used as a name in stack screens ? Could please elaborate on this ? I mean where does it break and how to probably redirect to one of the tabs directly(not the default one) from say an auth page
@cosdensolutions
@cosdensolutions 7 месяцев назад
Think of it as a simple folder to organise routes in. It won't show up in the URL, but it's helpful to group related routes in the same folder. Think of a "loggedIn" group and a "loggedOut" group with different screens for each. You wouldn't want "loggedIn" to show up in the url, but you would appreciate having all of the logged in routes in a separate folder than the logged out ones, so it's more organised. What might be slightly confusing is that to navigate to a logged in route, you'd have to pass it to the href tag like so: "loggedIn/home". But in the URL it would show up as "/home". Again, it's just to organise things and you use it to point to the route, but expo router just doesn't show it in the url so your urls are clean
@maddyIncubus
@maddyIncubus 7 месяцев назад
@@cosdensolutions Just a follow up question 1) When u say url u mean it as a deeplink url or in web the browser url ? 2) From the above example does this mean loggedIn and loggedOut techinically should not have the same file names ? would work for internal routing but not using external urls right ? Note: Going to stop with this question :)
@cosdensolutions
@cosdensolutions 7 месяцев назад
Url in the sense that when checking for matches to figure out which screen to render, the part in () is ignored. So that's the answer to both of your questions. If the pages have the same name, they'll both be matched on a url "/pageName". If they're in "loggedIn/pageName" or "loggedOut/pageName". You should check out the docs for grouping, it explains this really well!
@maddyIncubus
@maddyIncubus 7 месяцев назад
@@cosdensolutions thanks a ton man! appreciate the quick response
@abelmurua6980
@abelmurua6980 5 месяцев назад
Can you make a video of nesting tabs? Let say Home page has 4 TABS, but if you go inside one of those TABS (e.f. "Settings"), then those TABS get replaced but always have the HOME tab in order to go back. Cant find information on this type of structure. Imagine a react native app could have 50 screens? any tips? Thank you
@cosdensolutions
@cosdensolutions 5 месяцев назад
Well, I kinda did that by having the bottom tabs inside the index route. You can nest navigators inside other navigators. Have a look at the expo docs they have a page on that
@abelmurua6980
@abelmurua6980 5 месяцев назад
Mmm I dont see any implementation on nested tabs. Yes I have checked documentation but its not hekllping much. I was able to get tabs within tabs but I get duplicate bottom "TABS" I cant get rid of main parent set of tabs so far @@cosdensolutions
@cosdensolutions
@cosdensolutions 5 месяцев назад
aha, right. I have never had to use nested tabs, but it sounds like maybe they shouldn't be nested but rather next to each other, and you navigate between them as you would normally
@abelmurua6980
@abelmurua6980 5 месяцев назад
Maybe "nested" is not the right word. What I wanted to achieve is to have different tabs (icons /text) depending on the section of your web app. Let say you have a car & house e-commerce app. If you go to the car section you may see "buy a car", "sell a car" and "find a car" (3 tabs) but if you go to the house section you may see "buy a house", "sell a house", "rent a house", "repair a house" (4 tabs) do you this is possible or I'm using the tabs the wrong way?@@cosdensolutions
@imnash21
@imnash21 7 месяцев назад
You forgot how to position the tab container to the top like the FB app.
@cosdensolutions
@cosdensolutions 7 месяцев назад
😅
@RaushanKumar-fn6ks
@RaushanKumar-fn6ks 2 месяца назад
please make web compatible also
@AllahomAnsorGaza
@AllahomAnsorGaza Месяц назад
LOL its now NextJS style :D
@yoanhg421
@yoanhg421 5 месяцев назад
It's not buggy. You can't just drag a file to a different folder and not restart the build. if you had copied the files or created new ones then that would not have happened.
@abhinavdhama3014
@abhinavdhama3014 7 месяцев назад
Is it only for native?
@cosdensolutions
@cosdensolutions 7 месяцев назад
Yep
@ManKidCS
@ManKidCS 5 месяцев назад
Router != Rooter | Reuter
@PriyankBolia
@PriyankBolia 4 месяца назад
Never like react-native, Ionic is much better and in React if I have to go page structure, what's wrong with next.js then?
@nested9301
@nested9301 7 месяцев назад
rawter not roter
@cosdensolutions
@cosdensolutions 7 месяцев назад
potato potahto
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
@@cosdensolutions 🤣
@tmgj
@tmgj 5 месяцев назад
Might have been really good content... all I could hear was pounding on the keyboard.
@cosdensolutions
@cosdensolutions 5 месяцев назад
lool, it's fixed now
@abboudwow
@abboudwow 2 месяца назад
I didn't understand anything
@smalls5001
@smalls5001 Месяц назад
same 😔
@amahdavid3476
@amahdavid3476 Месяц назад
I'm having an issue where i am trying to navigate between my onboarding, login and signup screen, when I reach the last view and try to navigate back, my ios simulator crashes but the code builds fine
Далее
Mobile Devs Hate Servers. Expo Wants To Fix That.
16:05
Expo Router | Beginner's Crash Course
49:26
Просмотров 12 тыс.
Redux - Complete Tutorial (with Redux Toolkit)
37:01
Просмотров 165 тыс.
This UI component library is mind-blowing
8:23
Просмотров 607 тыс.
Moving Off React Native
20:50
Просмотров 179 тыс.
Web Developer Roadmap (2024) - Everything is Changing
25:02
Every React Concept Explained in 12 Minutes
11:53
Просмотров 437 тыс.