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

Went from React Navigation to Expo Router today and this tutorial totally got me going, thanks!

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

5 ай бұрын

glad you found it useful!

@Yaw_Dev

Ай бұрын

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

15 күн бұрын

SAME!

@ROVAKAN

15 күн бұрын

@@serdar.d kolay gelsin kanka :)

@serdar.d

15 күн бұрын

@@ROVAKAN 😄😄 eyvallah hocam sana da

This is the simplest and the smoothest explanation of the Expo Router. Thank you 🙏🏼

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

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!

Can you please make more react native stuff please.

@cosdensolutions

6 ай бұрын

Yes will do ☺️

@GolderiQ

2 ай бұрын

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

Folder-based routing is a GAME CHANGER

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

Ай бұрын

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

Ай бұрын

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

Crystal clear description. Thanks a lot!

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

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

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

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

Love your videos man ! Great tutorial

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

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

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

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

exactly what I was looking for, Thanks!

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

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

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.

Thank you so much for this video!

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

thanks man you helped me a lot :)

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

@cosdensolutions

6 ай бұрын

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

Thank you so much, I really appreciate it.

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

More React Native and Expo, please! 👀

Thanks 👍, hope you make more tutorials.

super helpful. thanks!!

best tutorial on expo router 👏

Thanks for the tutorial👍.

Thanks for this useful video.👍

Video mean alot for me. ❤

really good video!

Great video👍

Thanks for the Tutorial

Thanks man !!

thanks for the video.

The simplest one thanks

you the Goat

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

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

@cosdensolutions

2 ай бұрын

have a whole vid on my vscode setup

A like even before i watch the video😊

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.

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

6 ай бұрын

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

Please make more advanced react native videos

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

Thanks a loooooooooooooooooooooooooooooooooooooooooooooot !

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

great

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

@cosdensolutions

6 ай бұрын

Ergodox EZ

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

too good

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

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.

There are about 100 Stack.Screens in the file in layout.tsx, can I keep them or how can I split them?

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

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

Please complete the playlist !

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

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

🙌🙌🙌

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

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

@cosdensolutions

4 ай бұрын

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

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

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

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

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

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

liked it

well you can use rnfe instead of rjsfc

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

6 ай бұрын

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

6 ай бұрын

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

6 ай бұрын

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

6 ай бұрын

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

WOW

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

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

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

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

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

@cosdensolutions

5 ай бұрын

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

LOL its now NextJS style :D

please start react native projects or Tutorial

Is it only for native?

@cosdensolutions

6 ай бұрын

Yep

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

@cosdensolutions

6 ай бұрын

😅

Please bring a react native project

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 make web compatible also

Router != Rooter | Reuter

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.

rawter not roter

@cosdensolutions

6 ай бұрын

potato potahto

@prashlovessamosa

6 ай бұрын

@@cosdensolutions 🤣

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

@cosdensolutions

5 ай бұрын

lool, it's fixed now

I didn't understand anything

@smalls5001

21 күн бұрын

same 😔

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.