Build EVERY Layout with Expo Router

Let's dive deep into Expo Router and create a file-based routing for our React Native app. We cover tabs, drawers, nested layouts, modals and even building universal React Native apps with web layout and CSS!
🔥 Learn React Native FAST: galaxies.dev
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
#############################
#reactnative #reactjs #expo

[@pavelesonic]

I've been studying/trying the new Expo Route v2 for the last few days, and thanks to your videos, I've gained a pretty good grasp of it. This stream was a great recap of everything I've learned. So, thank you so much for your work. It is really helpful and meaningful. :)

[@galaxies_dev]

Glad to help!

[@DestinationDub]

You have helped me SOOOOOOO much, Simon. Thank you from the bottom of my heart!

[@galaxies_dev]

You are so welcome!

[@galaxies_dev]

Become a master of the new Expo Router in my LIVE Workshop: ti.to/galaxiesdev/react-native-expo-router-workshop

[@darenbaker4569]

After watching this over the last 24 hours I think that this format was perfection, working with native and web, really works. This has helped me and I am going to recommend this video to my fellow developers next week as we are making the move to universal apps with expo. Fantastic work

[@galaxies_dev]

Wow thank you so much, really happy to hear!

[@Tyler-pz2ol]

By universal apps - you mean web and mobile from just the expo code? Does this replace NextJS?

[@tanupathak2151]

Thank you for making these kind of content. You gained a loyal subscriber today!

[@galaxies_dev]

Awesome, thank you!

[@AndresJesse]

Man, thanks!! You just solved a problem that blowed my mind for days! That nested index was also causing self-redirects here.

[@galaxies_dev]

Always happy to help!

[@tomatdoras]

Followed along, have now subscribed. Can't wait to also head over to Galaxies and see what else I can learn. As a web dev trying to get into apps, your videos are appreciated

[@galaxies_dev]

Thank you so much! Let me know whenever you encounter problems :)

[@jesussanchez6628]

I was really struggling with having a drawer and tabs on a dashboard screen. This video is exactly what i needed, earned a like and follow. Thank you sir!

[@galaxies_dev]

Great to hear!

[@vinitjain7]

00:06 Deep dive into Expo router features. 02:26 Expo Router enables clean navigation in a single project 06:43 Expo CLI adds necessary features for Expo Router to function correctly 08:58 Using Expo Router version 2 and setting up without integrated tabs template 13:42 Setting app.json type routes to true for code compilation 16:06 Setting up file-based routing for faster project setup 20:54 Using Expo Router for navigation 23:10 Group elements for file-based routing 27:29 Setting up tab bar and defining icons using Expo Router 30:01 Exploring icon styling and customization in Expo Router 34:35 Implement the layout file to customize the page 36:56 Issues with lockout navigation 42:17 Issue with multiple index pages causing routing problems 44:41 Adding a modal page in Expo Router 49:20 Understanding different levels and confusion with Expo Router 51:31 Creating layouts with Expo Router for navigation 55:44 Implementing platform specific modules for web and mobile apps 58:11 Implementing navigation and rendering content using Expo Router 1:02:54 Adding CSS support with Metro config 1:05:18 Using platform-specific code for better structure and functionality. 1:09:59 Expo Router provides solutions for using custom components for web and mobile. 1:12:28 Expo Router allows for universal app setup with file-based routing and customization for the web. 1:17:28 Expo Router v3 will include API routes for secure environment variables and requests. 1:19:38 Implementing styling with CSS for page layouts 1:24:00 Encourage feedback and engagement from viewers Crafted by Merlin AI.

[@Amitkumar-ps1dt]

extremely helpful videos simon, Thank you

[@galaxies_dev]

Glad you like them!

[@BeastBishop]

Thank you for this great stream. I have developed apps using the old navigation. I tried using router myself but I ended up with 3 broken projects when implementing tabs to drawers or drawers to tabs. I now understand what I was missing.

[@galaxies_dev]

Glad I could help you out :)

[@pranitmane]

very helpful! thanks ❤

[@ManasTunga]

Thanks for making this video.

[@galaxies_dev]

My pleasure. give it a share :)

[@codewithtae6637]

Appreciate the video!

[@galaxies_dev]

Glad it was helpful!

[@JulioGarcia-sephirothtbm]

I had a really weird issues before with the physical back button on Android, maybe my file structure was wrong thank for all the content I'm gonna give another try to the Expo Router

[@coskunbaris946]

What do you use to colorize your cursor?

[@wilsonbryne7]

Why modal is not working on android emulator??

[@sunnysingha1154]

Wtched it full like a movie❤..wnt more like this.. waiting for more

[@galaxies_dev]

Thanks!

[@sunnysingha1154]

@@galaxies_dev ur wlkm

[@marcosmoura2667]

Thank you for the excellent content, Waiting for the customized web version! I'm from Brazil

[@galaxies_dev]

Coming soon!

[@Norfeldt]

This was magic 🪄 to watch. Thank you so much. Will be looking so much forward to trying this out myself on the next RN (expo) project I start

[@galaxies_dev]

Awesome, and hope everything works for you!

[@mrd.j.2303]

Hey I really meant to catch this livestream but I didn't get the notification. Great video!

[@galaxies_dev]

Next time!

[@mrd.j.2303]

@@galaxies_dev definitely. And where are you from? Or based? Your accent is peculiar.

[@ayin86cn]

这个视频太棒了，this is awesome video. thank you!

[@galaxies_dev]

Happy to help!

[@ihzakarunia2408]

hey, do you know how to give transition when transitioning between tabs?

[@user-dj9ud6vj3j]

How can I make the Top Tab Scroll upwards whenever I scroll up on the screen. For example: The KZbin Channel Screen has a header, then below it a similar Top Tab Navigation Bar and then below the bar the content according to the tab of Top Tab Nav. When u scroll on that screen the content and the top tab and the header all move up

[@MsToptool]

Expo router is cool but I am facing an issue when redirecting to a Stack screen where the animations don't work, by animations I mean :

[@akosbalint3485]

Could anybody tell me, how to use and at the same(root) _layout file? I would like to set the styles(background) for all the screens in one place and configure the stack as well.

[@silverheart573]

Is there anyway to use create-expo-app using JS default set up rather than Typescript?

[@welly_de]

how to have tabs only on the parent screen of the stack not the childs and with autocomplete routing still worked

[@michelecocucciocatania]

Hey. Great video! Did you find a solution for the "logout" issue apart from putting () around the routes? I had the same issue in our project and I ended up having to create a duplicated page and navigate to that when I wanted to take the user to the first screen after logging out. Of course that's not ideal. I don't know if it's a bug from Expo Router or an expect behaviour as it navigates to the first "index" file that he finds

[@galaxies_dev]

Yeah I think navigating to the first index file is the problem, think there was an open github issue!

[@mishen-thakshana]

Can you do a video on background actions

[@jayshivsahu]

Hi Simon! Suppose I have 5 pages: pg1, pg2, ...pg5, all are inside a stack layout of Expo Router v3. I reached pg3 by navigating one after another from pg1. I want to display this page as a splash screen for 5 seconds. After 5 seconds, I want to navigate to pg5. I want now when I click back from the header of pg5 or from the device back button, it should navigate directly to pg3, not to pg4. In simple terms, I want to remove pg4 from my stack history. In the Expo documentation, they have mentioned to use router.dismiss, but it does not work for me. Could you please give me any ideas? Thanks in advance.

[@Niletixofficial]

How do i add the authprovider here?

[@lucifer-5ybtn]

Do you know how to implement a feature where if you click on a link within a modal (a screen with presentation=modal) and close the modal and redirect to the intended screen after a tiny delay (500ms for example) When I do that, it happens but the new screen which gets pushed to the stack doesn’t have a back button. For reference: In Whatsapp on iOS, when you click on a contact in the new chat screen (modal) it closes the modal and then redirects to the chat page after a short delay

[@user-ly6ho1jq6b]

Is the source code for this video available? If so, where can I find it.

[@renekutter7562]

Ich versuche seit bestimmt 5 Stunden eine einfache Menü-Struktur aufzubauen, aber ich bekomme es einfach nicht hin🙁 Hier im Video hat der entry point ja eine Stack Navigation. Ich möchte allerdings das ich mit einer Tab Navigation starte. Eine der Seiten in der Tab Navigation soll eine Stack Navigation beinhalten. Am besten ohne Redirect. Wie realisiere ich das? Wäre dir sehr dankbar ❤

[@darkwolf4074]

Hello Simon, I'm wondering what plugin you are using in vscode that keeps giving you hints on your code please, thanks

[@galaxies_dev]

That will be Ghub Copilot!

[@hanibal43]

Would love to see how this navigation would work with tamagui's xstack/ ystack etc.

[@galaxies_dev]

Yeah will try out Tamagui soon!

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

[@galaxies_dev]

You can set the href of a stack to null so it's not rendered in a tab bar, or set a styling for that item when using a drawer to hide it. Otherwise, all files automatically show up in those layouts!

[@AndreyEscobar]

I have a question... If the index is the first page to show, i have to put my Login in this page... And if i get the authentication in my firebase, i show the first page of the user loged... So, i´m trying to choose this page of the user logged.... What page i must choose? The page './(tabs)/(one)/one'? Is any problem that´s page is in the second layer of the tree... I try to set the page './(tabs)/(one)/one' for the user loged, but i lost the tabs in the baseboad...and i don´t know why the tabs is not shown....is any problem to this?

[@AndreyEscobar]

import {View, Text, Button, StyleSheet} from 'react-native' import { Stack, Link, useRouter } from 'expo-router'; import React, {useState, useEffect} from "react"; import { firebase } from './config'; import Login from './login'; import One from './(tabs)/(one)/one'; const Page = () => { const [initializing, setInitializing] = useState(true); const [user, setUser] = useState(true); const router = useRouter(); function onAuthStateChanged(user) { setUser(user); if (initializing) setInitializing(false); } useEffect(() => { const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged); return subscriber }, []); if (initializing) return null; if (!user){ return( ); } return( ); } export default Page

[@himavarshanreddy1341]

"I have 3 tabs - home, cart, profile. cart and profile are folder where i have multiple pages. now when i can click on the cart tab it shows tab bar by default and when i go the second page which is on the cart folder i don't want see the tab bar. How can i achieve this?

[@galaxies_dev]

Then those pages should not be children of the tabs layout folder!

[@mitchy3686]

Do you have this in GitHub?

[@MarlonEnglemam]

I cant pretend I like file based routing in Expo anymore. No matter how many apps I've coded with that system, it always breaks screens and layouts and takes minutes to find the issue. Wish we all could stop all this madness around file based routing, I dont understand why everyone is so obsessed with it

[@werther3974]

!!!! What if i want drawer tab inside each and every tab page?

[@jesussanchez6628]

Would like to know this as well

[@galaxies_dev]

You would have to define a drawer layout either around or inside the tab!

[@juniorMr]

Ca i follow along using normal js?

[@adelashour3253]

ExpoMetroConfig.loadAsync is not a function can any body tell?

[@mauricearida9001]

why didn't you share the code bro 😢

[@SourVD]

This was so helpful, I find Expo's documentation to be the worst I've ever seen

[@j7512]

How do you do this when your pages are in sub directories?

[@galaxies_dev]

The directories are the path, every folder/file is a URL path component!

[@j7512]

Thanks!@@galaxies_dev I've noticed that the drawbacks of using react native is that you can't have pixel perfect accuracy. If I want to move a text 2 pixels to the right, I can't do that

[@BBTR_]

native navigation or expo router?

[@galaxies_dev]

Umm it's both in the title and thumbnail? We are using Expo Router, and I recommend it!

[@regularyt-pz4ki]

perfect up to the tabs part next time prepare before hand

[@dylandiaz4786]

I really still don't see the need for react native to be compatible with the web, we already have plenty of Framework for websites and react native is very far from them, I would never use react native for a web platform

[@galaxies_dev]

If you want to have just one code base because you don't have a big team, it's a viable solution!

[@neneodonkor]

@@galaxies_dev it adds another level of unnecessary complexity.

[@werty2172]

@@neneodonkorskill issue

[@hendazzler]

Good content but the music really messes with watching at 2x speed and it's a bit loud relatively to your speaking voice

[@galaxies_dev]

Sorry, will try to improve it next time!

[@fallanstar]

Why you prefer Expo instead of CLI 80 percent apps are developed with CLI in market so plz start CLI tutorial

[@Flash136]

Expo is the future of React Native