Learn Expo Router - Complete Tutorial

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!

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

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]

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]

SAME!

[@ROVAKAN]

@@serdar.d kolay gelsin kanka :)

[@serdar.d]

@@ROVAKAN 😄😄 eyvallah hocam sana da

[@serdar.d]

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

[@prashlovessamosa]

Can you please make more react native stuff please.

[@cosdensolutions]

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

[@czuka1520]

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

[@Lykkos29]

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

[@nitsanbh]

Folder-based routing is a GAME CHANGER

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

[@Noone-bb5qh]

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!

[@jijieats]

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

[@deepmistry3114]

Crystal clear description. Thanks a lot!

[@emmanueloni2147]

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

[@nehat786]

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

[@MrAlao675]

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.

[@Smongo412]

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.

[@danielflorencio9661]

More React Native and Expo, please! 👀

[@LewraAzad]

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

[@felipecabreira4321]

Love your videos man ! Great tutorial

[@bugrakaraaslan8556]

exactly what I was looking for, Thanks!

[@_SABARIVASANS-cy7qw]

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

[@DatDat59]

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

[@cosdensolutions]

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

[@ronallan8680]

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

[@joaquinrodriguez7100]

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

[@rukacruxer1474]

best tutorial on expo router 👏

[@abubokor6853]

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

[@mariusbora4470]

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

[@DorgadoPlays1]

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

[@dickydarmawan4790]

Thanks for the tutorial👍.

[@nfaical3]

Thanks 👍, hope you make more tutorials.

[@ahmadrami14]

Thanks for the Tutorial

[@saqibmuhammad7218]

Video mean alot for me. ❤

[@SamtheSWE]

Thank you so much for this video!

[@freeinformation7877]

Thank you so much, I really appreciate it.

[@culturapoliticaycomputador9999]

Thanks for this useful video.👍

[@gaddp]

super helpful. thanks!!

[@yassinekader8308]

thanks man you helped me a lot :)

[@budiman-kr5ug]

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

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

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

[@cosdensolutions]

Ergodox EZ

[@martrom0]

Thanks man !!

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

[@kratos-oi7sz]

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

[@renekutter7562]

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]

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

[@h.t.8812]

really good video!

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

[@spare4337]

The simplest one thanks

[@SomeRandom3DArtist]

Great video👍

[@FriendsExplanation]

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

[@h.t.8812]

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]

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

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

[@paysnug4470]

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

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

[@abelmurua6980]

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]

github copilot :D

[@abelmurua6980]

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

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

[@msrajawat298]

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.

[@amralimohamed6497]

A like even before i watch the video😊

[@SuperPlex99339]

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

[@PetersExcapades]

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

[@yourgflikesit]

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

[@cosdensolutions]

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

[@user-pk4ni3tv7l]

you the Goat

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

[@MJ-vx5cz]

Please make more advanced react native videos

[@greenshaheen6716]

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

[@maddyIncubus]

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]

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]

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

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]

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

[@vyankateshmiskin9618]

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

[@abelmurua6980]

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]

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]

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]

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]

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

[@lukemontana9792]

great

[@atnguyenucchi9776]

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

[@BukkyOdunsi]

too good

[@emeryd7432]

Thanks a loooooooooooooooooooooooooooooooooooooooooooooot !

[@yahyeabdullahinuur5247]

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

[@VirtualVibesMusic]

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

[@mishen-thakshana]

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

[@cosdensolutions]

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

[@syeedimtiaz2974]

Please complete the playlist !

[@HMS_55]

🙌🙌🙌

[@benjaminkissa9100]

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

[@abhinavdhama3014]

Is it only for native?

[@cosdensolutions]

Yep

[@50kT]

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

[@saim4556]

well you can use rnfe instead of rjsfc

[@nikhilnagar3253]

liked it

[@2gbeh]

WOW

[@imnash21]

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

[@cosdensolutions]

😅

[@PriyankBolia]

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]

please start react native projects or Tutorial

[@AllahomAnsorGaza]

LOL its now NextJS style :D

[@yoanhg421]

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]

Please bring a react native project

[@RaushanKumar-fn6ks]

please make web compatible also

[@ManKidCS]

Router != Rooter | Reuter

[@nested9301]

rawter not roter

[@cosdensolutions]

potato potahto

[@prashlovessamosa]

@@cosdensolutions 🤣

[@tmgj]

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

[@cosdensolutions]

lool, it's fixed now

[@abboudwow]

I didn't understand anything

[@smalls5001]

same 😔

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