Expo Router Tab Navigation From the Docs

Expo Router Tab Navigation From The Docs - Working With File Based Routing
#expo #reactnative #react

Most of the work I have done with the new router started with the basic two-tab template. It has been great, but there have been times when I didn't understand the magic that was going on behind the scenes

I decided to do these videos starting from scratch, adding expo router to a basic expo application, and following along with the documentation as I build the application.

I hope you will join me on this journey and share the content with friends and associates.

💥 Chapters
--------------------------
00:00 - Intro
01:00 - Creating Basic Application Project
03:20 - Adding Expo Router Configuration To Project
05:10 - Trying to Follow The Doc, But it is Honestly HORRIBLE
05:52 - Getting App To Run With Router and Just Index File
07:07 - Starting The Tabs Structure, Home Tab
13:30 - Adding Second Tab To App, Settings Tab
15:00 - Fixing Titles On Tab Pages
16:45 - Adding Detail Page To Home Tab
19:25 - Adding Dynamic Route To Settings Tab
25:52 - Wrap Up

💥 Links
--------------------------

💥 Social Media
--------------------------

[AaronSaundersCI]

If you enjoyed the content you can help support the channel, consider hitting the THANK YOU button

[WahWahWeeWah]

You are a legend. Thank you for simplifying the docs for us.

[brunovercosa]

I have searched all the YouTube videos that teach deep stuff about expo router, you was the only one who did it. Thanks 🙏🏽

[nunajah]

thank you so much, i finally can solve my problem now

[martinp]

Thanks for keeping it to the basics. excellent videos! Please post link to source.

[aldavape]

Gracias Aaron, good job and so thanks for share your knowledge.

[asaphhere]

But why do you have extra bottom padding for the bottom navigation bar?

[metacarpo]

Oh nice! That was more comprehensive then the docs, they seem so shallow, specially if you are not familiar with react navigation and so on. I have a question though, what If I want to create a dynamic post page, and inside this page I have a tab where I can see for example the post content and them swipe left to see the comments of the post? In that case (tabs)/__layout should be dynamic? and then I create the content and the comments folder each one with a dynamic page as well? I'm confused.

[armyofdamonkeys]

Hey, quick note... this is the 1st video in the playlist series... but at 5m3s you mentioned to watch the previous Stack video... so this should be the 2nd video in the series if you can reorder... Also side question... i started out using typescript project, so like pretend my App file was called App.tsx, then i noticed i had to use i think index.js, settings.js, etc for my route component files... is there a way to keep the routes as typescript files as well (like settings.tsx or settings.ts maybe)?

[VitalMercenary]

How would you go about adding a button in the tabs that does not correspond to a route?

[paysnug]

react-native-modalize

wont overlay on this tab

[candios]

Thanks! I'm getting this error and just can't solve it. Somehow it has an issue with the redirection of the core index.tsx file.
[Error: Attempted to navigate before mounting the Root Layout component. Ensure the Root Layout component is rendering a Slot, or other navigator on the first render.]

[davidlintin]

Great video Aaron, indeed the Doc's are 🚽 Quick question, say I was on the settings tab and I wanted a link to the Home Tab how would we go about that? Have tried router.replace & router.push & Link href={/("tabs")/home}

[EdwardTrann]

is it possible to hide bottom tabs from a specific child?