Learn Expo Router - Complete Tutorial

Рет қаралды 44,189

5 ай бұрын

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!

Пікірлер: 118

@cosdensolutions Ай бұрын

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

@ROVAKAN 4 ай бұрын

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 4 ай бұрын

glad you found it useful!

@Yaw_Dev 26 күн бұрын

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.

@czuka1520 4 ай бұрын

This is my ultimate Expo Router tutorial! Thanks so much for making this!

@nitsanbh 4 ай бұрын

Folder-based routing is a GAME CHANGER

@Lykkos29 5 ай бұрын

Thanks for this!, I will check it later, just letting you know your explanation and code snippets are super understandable 💯🤙

@abubokor6853 13 күн бұрын

This is the what i actually need. Thank You SIr.

@jijieats 5 ай бұрын

Loved this tutorial! I would really love more react native tutorials! Keep it up

@Noone-bb5qh 4 ай бұрын

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!

@deepmistry3114 Ай бұрын

Crystal clear description. Thanks a lot!

@emmanueloni2147 4 ай бұрын

Thank you for this. It was really explanatory and simple to learn, now the docs makes sense 😁. Weldone 👍👍

@e-jahman Ай бұрын

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

@nehat786 5 ай бұрын

Sir we badly expect a react native from you. The way you explain is awesome.

@LewraAzad 3 ай бұрын

Thanks for the tut and love the way you say router!!

@felipecabreira4321 5 ай бұрын

Love your videos man ! Great tutorial

@_SABARIVASANS-cy7qw Ай бұрын

This video was really helpful and gave me a better understanding of the router. Thanks and keep making good content

@FriendsExplanation 15 күн бұрын

You just made my day 🌼. Thank for the video. It is helping junior developers like me.

@MrAlao675 5 ай бұрын

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.

@ronallan8680 4 ай бұрын

Hey that was Great dude! Really clear and succinct. Thnams!

@bugrakaraaslan8556 2 ай бұрын

exactly what I was looking for, Thanks!

@shaz101 Ай бұрын

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

@joaquinrodriguez7100 Ай бұрын

Nice tutorial, it was really clear to me. Thank you!

@danielflorencio9661 5 ай бұрын

More React Native and Expo, please! 👀

@prashlovessamosa 5 ай бұрын

Can you please make more react native stuff please.

@cosdensolutions 5 ай бұрын

Yes will do ☺️

@GolderiQ Ай бұрын

@@cosdensolutionsit’s been for months 🥲 Do you use Apple silicon? How well does it all work with Expo, React native, etc..?

@mariusbora4470 3 ай бұрын

very good and useful info, thank you for making this tutorial!

@rukacruxer1474 2 ай бұрын

best tutorial on expo router 👏

@DorgadoPlays1 2 ай бұрын

Thank you very much bro! helped me to resolve a problem in my App

@Smongo412 29 күн бұрын

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

@JohnWick-hp8wn 21 күн бұрын

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 21 күн бұрын

@@JohnWick-hp8wn 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.

@nfaical3 5 ай бұрын

Thanks 👍, hope you make more tutorials.

@dickydarmawan4790 5 ай бұрын

Thanks for the tutorial👍.

@DatDat59 5 ай бұрын

I follow you because I know more react native than react js, this is so cool to see a react native video !

@cosdensolutions 5 ай бұрын

Will do more of them ☺️ I'm also a rn dev

@SamtheSWE 4 күн бұрын

Thank you so much for this video!

@yassinekader8308 Ай бұрын

thanks man you helped me a lot :)

@freeinformation7877 2 ай бұрын

Thank you so much, I really appreciate it.

@ahmadrami14 2 ай бұрын

Thanks for the Tutorial

@gaddp Ай бұрын

super helpful. thanks!!

@saqibmuhammad7218 5 ай бұрын

Video mean alot for me. ❤

@culturapoliticaycomputador9999 3 ай бұрын

Thanks for this useful video.👍

@martrom0 Ай бұрын

Thanks man !!

@SomeRandom3DArtist 2 ай бұрын

Great video👍

@h.t.8812 2 ай бұрын

really good video!

@kratos-oi7sz 5 ай бұрын

A video on how to setup a turborepo with expo and nextjs please 🤞🤞

@spare4337 3 ай бұрын

The simplest one thanks

@rolloooo Ай бұрын

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

@budiman-kr5ug 3 ай бұрын

16:33 get overrided or nested (parent layout still exists and wrapping the child layout)?

@blirdo 4 күн бұрын

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.

@yucanli2957 Ай бұрын

amazing tutorial! Wondering would you like to share some of your extension used in vsc? I found the autofill function is very useful!

@cosdensolutions Ай бұрын

have a whole vid on my vscode setup

@harag9 5 ай бұрын

Great video thanks for this. What keyboard did you get?

@cosdensolutions 5 ай бұрын

Ergodox EZ

@user-pk4ni3tv7l 3 ай бұрын

you the Goat

@h.t.8812 2 ай бұрын

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

@amralimohamed6497 5 ай бұрын

A like even before i watch the video😊

@amahdavid3476 9 күн бұрын

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

@MJ-vx5cz 5 ай бұрын

Please make more advanced react native videos

@msrajawat298 24 күн бұрын

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.

@renekutter7562 5 ай бұрын

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 5 ай бұрын

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

@abelmurua6980 4 ай бұрын

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 4 ай бұрын

github copilot :D

@abelmurua6980 4 ай бұрын

How much do you recommend it? lol github copilot vs chatgpt? @@cosdensolutions

@cosdensolutions 4 ай бұрын

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

@paysnug4470 5 ай бұрын

the page inside tab.screen background is not showing something overlay it

@VirtualVibesMusic Ай бұрын

👍👍👍👍👍👍👍👍👍👍👍👍👍👍 great stuff

@peterspianojourney 4 ай бұрын

I keep getting TypeError: Cannot read property 'isReady' of undefined, js engine: hermes and have no idea why, anyone know?

@greenshaheen6716 5 ай бұрын

how can i use it in react-native expo bare project?

@yourgflikesit 3 ай бұрын

Why did you move the users folder into the (tabs) folder? Was that required?

@cosdensolutions 3 ай бұрын

because I wanted it to be a whole tab, so everything within it is its own stack

@BukkyOdunsi 4 ай бұрын

too good

@SuperPlex99339 Ай бұрын

When I use the expo router I am unable to make the status bar translucent. It always shows.

@emeryd7432 11 күн бұрын

Thanks a loooooooooooooooooooooooooooooooooooooooooooooot !

@lukemontana9792 2 ай бұрын

great

@maddyIncubus 5 ай бұрын

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 5 ай бұрын

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 5 ай бұрын

@@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 5 ай бұрын

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 5 ай бұрын

@@cosdensolutions thanks a ton man! appreciate the quick response

@vyankateshmiskin9618 5 ай бұрын

'cannot GET /URL' error on refresh with React Router how to fix this?

@atnguyenucchi9776 3 ай бұрын

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

@abelmurua6980 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

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

@HMS_55 3 ай бұрын

🙌🙌🙌

@yahyeabdullahinuur5247 5 ай бұрын

Please make video of typescript with react i'm eager to use permanently typescript instead of javascript in my react code

@50kT Ай бұрын

Problem with tabs is it seems to take away the animation too

@nikhilnagar3253 4 ай бұрын

liked it

@mishen-thakshana 4 ай бұрын

How did you instantly change ' ' to `` when putting ${}

@cosdensolutions 4 ай бұрын

I have an extension for that :D check out my vscode vid

@benjaminkissa9100 3 ай бұрын

can do a toturial to change it to apk file for android

@PriyankBolia 2 ай бұрын

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?

@hubesh716 5 ай бұрын

please start react native projects or Tutorial

@2gbeh 4 ай бұрын

WOW

@yoanhg421 3 ай бұрын

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.

@mma-dost 2 ай бұрын

Please bring a react native project

@abhinavdhama3014 5 ай бұрын

Is it only for native?

@cosdensolutions 5 ай бұрын

Yep

@ManKidCS 4 ай бұрын

Router != Rooter | Reuter

@imnash21 5 ай бұрын

You forgot how to position the tab container to the top like the FB app.

@cosdensolutions 5 ай бұрын

😅

@RaushanKumar-fn6ks 24 күн бұрын

please make web compatible also

@nested9301 5 ай бұрын

rawter not roter

@cosdensolutions 5 ай бұрын

potato potahto

@prashlovessamosa 5 ай бұрын

@@cosdensolutions 🤣

@tmgj 4 ай бұрын

Might have been really good content... all I could hear was pounding on the keyboard.

@cosdensolutions 4 ай бұрын

lool, it's fixed now

@abboudwow 20 күн бұрын

I didn't understand anything

@lucdina5118 Ай бұрын

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.