Learn Expo Router - Complete Tutorial
HTML-код
- Опубликовано: 6 сен 2024
- 🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Join The Discord! → discord.cosden...
Source Code → github.com/cos...
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!
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
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.
glad you found it useful!
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.
SAME!
@@serdar.d kolay gelsin kanka :)
@@ROVAKAN 😄😄 eyvallah hocam sana da
Can you please make more react native stuff please.
Yes will do ☺️
@@cosdensolutionsit’s been for months 🥲
Do you use Apple silicon? How well does it all work with Expo, React native, etc..?
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
Your explanations were very straightforward, now I understand the basics, thank you!
Folder-based routing is a GAME CHANGER
Went from React Navigation to Expo Router today and this tutorial totally got me going, thanks!
I cannot explain how grateful I am. Thank you ❤
Thanks for this!, I will check it later, just letting you know your explanation and code snippets are super understandable 💯🤙
More React Native and Expo, please! 👀
its such a wonderful tutorial. but i realize one thing that when we start using tabs the animation transition between stacks is gone, why?
I follow you because I know more react native than react js, this is so cool to see a react native video !
Will do more of them ☺️ I'm also a rn dev
Best tutorial yet !!!!!!!!!!! I just got started with dev your tutorial is truly the best man
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
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!)
@@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.
thank you very much, this is way better than the official documentation
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.
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
you just made a new subscriber, thank you
very informative and straightforward tutorial, thank you!
thanks! first time learning mobile and this was something I really needed to learn
This is my ultimate Expo Router tutorial! Thanks so much for making this!
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!
A video on how to setup a turborepo with expo and nextjs please 🤞🤞
This video was really helpful and gave me a better understanding of the router. Thanks and keep making good content
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!!!
Sir we badly expect a react native from you. The way you explain is awesome.
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.
Crystal clear description. Thanks a lot!
Thank you, you explain really well.
This is the what i actually need.
Thank You SIr.
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.
You just made my day 🌼. Thank for the video. It is helping junior developers like me.
Thank you for this. It was really explanatory and simple to learn, now the docs makes sense 😁. Weldone 👍👍
Thank you very much bro! helped me to resolve a problem in my App
Great tutorial - new subscriber 👍
This is the simplest and the smoothest explanation of the Expo Router. Thank you 🙏🏼
Loved this tutorial! I would really love more react native tutorials! Keep it up
Thank you so much for this so useful tutorial
Nice tutorial, it was really clear to me. Thank you!
Thanks for the tut and love the way you say router!!
Thank you so much for this video!
best tutorial on expo router 👏
exactly what I was looking for, Thanks!
Problem with tabs is it seems to take away the animation too
Thanks for this video! ❤❤❤
Hey that was Great dude! Really clear and succinct.
Thnams!
amazing tutorial! Wondering would you like to share some of your extension used in vsc? I found the autofill function is very useful!
have a whole vid on my vscode setup
super helpful. thanks!!
Love your videos man ! Great tutorial
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.
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
very good and useful info, thank you for making this tutorial!
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
i got stuck on having more than one tab (4 or 5 tabs) based on default expo tabs to work with from main tutorial.
Also issue with using Expo and LinearGradient which may not be available on Expo... how you come across this or similar?
Thanks.
Please make more advanced react native videos
When I use the expo router I am unable to make the status bar translucent. It always shows.
i want group tabs how to do that.. like home can have multiple navigations not necessarily tabs..
thanks for the video.
you the Goat
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
Thank you so much, I really appreciate it.
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.
Is it possible to use Expo Router without default exports? I dislike default exports and have a eslint rule to disable them completely.
Thanks 👍, hope you make more tutorials.
thanks man you helped me a lot :)
Please complete the playlist !
Thanks for this useful video.👍
Thanks for the Tutorial
how to make the headerTile dynamic since its [id] at first place
Thanks for the tutorial👍.
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
Video mean alot for me. ❤
There are about 100 Stack.Screens in the file in layout.tsx, can I keep them or how can I split them?
The simplest one thanks
great
the page inside tab.screen background is not showing something overlay it
A like even before i watch the video😊
Great video👍
well you can use rnfe instead of rjsfc
16:33 get overrided or nested (parent layout still exists and wrapping the child layout)?
👍👍👍👍👍👍👍👍👍👍👍👍👍👍
great stuff
Thanks a loooooooooooooooooooooooooooooooooooooooooooooot !
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
Why did you move the users folder into the (tabs) folder? Was that required?
because I wanted it to be a whole tab, so everything within it is its own stack
Great video thanks for this. What keyboard did you get?
Ergodox EZ
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?
github copilot :D
How much do you recommend it? lol github copilot vs chatgpt? @@cosdensolutions
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
I keep getting TypeError: Cannot read property 'isReady' of undefined, js engine: hermes and have no idea why, anyone know?
doesn't navigate with me
too good
'cannot GET /URL' error on refresh with React Router how to fix this?
can do a toturial to change it to apk file for android
How did you instantly change ' ' to `` when putting ${}
I have an extension for that :D check out my vscode vid
Please make video of typescript with react i'm eager to use permanently typescript instead of javascript in my react code
how can i use it in react-native expo bare project?
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
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
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
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
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
🙌🙌🙌
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.
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
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
@@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 :)
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!
@@cosdensolutions thanks a ton man! appreciate the quick response
You forgot how to position the tab container to the top like the FB app.
😅
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?
Please bring a react native project