Build EVERY Layout with Expo Router
HTML-код
- Опубликовано: 26 дек 2024
- 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
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.
Thank you!!
So glad I found this video! The best explanation on youtube about expo file based routing. i love how you included so many use cases, i needed all of them 🙏
You're very welcome!
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
Wow thank you so much, really happy to hear!
By universal apps - you mean web and mobile from just the expo code? Does this replace NextJS?
This is by far best tutorial on expo router. Thanks you. I switched from npx to bun after this video.
If you enjoyed it, could you share the channel with your RN buddies? ️👋
Thanks!
You have helped me SOOOOOOO much, Simon. Thank you from the bottom of my heart!
You are so welcome!
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. :)
Glad to help!
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.
Glad I could help you out :)
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!
Great to hear!
What's up with presentation='modal' on android? it doesnt seem to work.
Thank you for making these kind of content. You gained a loyal subscriber today!
Awesome, thank you!
Man, thanks!! You just solved a problem that blowed my mind for days! That nested index was also causing self-redirects here.
Always happy to help!
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
Awesome, and hope everything works for you!
Wtched it full like a movie❤..wnt more like this.. waiting for more
Thanks!
@@galaxies_dev ur wlkm
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
Thank you so much! Let me know whenever you encounter problems :)
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.
How can I make the Top Tab Scroll upwards whenever I scroll up on the screen.
For example: The RUclips 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
this stream is pure gold
Thank you mate!
extremely helpful videos simon, Thank you
Glad you like them!
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
Appreciate the video!
Glad it was helpful!
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.
hey brother Im totally confused that what I do next I just complete typescript now I learn the basics of react-native pls I know the react I dont know node, express, mongodb whaty should u prefer could I jump direct in a react-native project ????
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.
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!
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
I thought I was a lone at some point.
+1
hey, do you know how to give transition when transitioning between tabs?
Is there anyway to use create-expo-app using JS default set up rather than Typescript?
Not sure, but I also wouldn't recommend it tbh
very helpful! thanks ❤
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 ❤
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?
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
Hello Simon, I'm wondering what plugin you are using in vscode that keeps giving you hints on your code please, thanks
That will be Ghub Copilot!
!!!! What if i want drawer tab inside each and every tab page?
Would like to know this as well
You would have to define a drawer layout either around or inside the tab!
Ca i follow along using normal js?
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 :
"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?
Then those pages should not be children of the tabs layout folder!
Is the source code for this video available? If so, where can I find it.
Thanks for making this video.
My pleasure. give it a share :)
How do i add the authprovider here?
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
Yeah I think navigating to the first index file is the problem, think there was an open github issue!
Become a master of the new Expo Router in my LIVE Workshop: ti.to/galaxiesdev/react-native-expo-router-workshop
Good content but the music really messes with watching at 2x speed and it's a bit loud relatively to your speaking voice
Sorry, will try to improve it next time!
Hey I really meant to catch this livestream but I didn't get the notification. Great video!
Next time!
@@galaxies_dev definitely. And where are you from? Or based? Your accent is peculiar.
ExpoMetroConfig.loadAsync is not a function
can any body tell?
how to have tabs only on the parent screen of the stack not the childs and with autocomplete routing still worked
why didn't you share the code bro 😢
Thank you for the excellent content, Waiting for the customized web version! I'm from Brazil
Coming soon!
What do you use to colorize your cursor?
这个视频太棒了，this is awesome video. thank you!
Happy to help!
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
21:31 who else thought they got a message from discord
also thanks for the video I use this a tutoriol before my internship project but pls speak slower and explain more I have to rewatch 100 times after every step
Can you do a video on background actions
How do you do this when your pages are in sub directories?
The directories are the path, every folder/file is a URL path component!
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
Would love to see how this navigation would work with tamagui's xstack/ ystack etc.
Yeah will try out Tamagui soon!
Do you have this in GitHub?
Same here! I just can't call it "X"
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
If you want to have just one code base because you don't have a big team, it's a viable solution!
@@galaxies_dev it adds another level of unnecessary complexity.
@@neneodonkorskill issue
@@neneodonkorI’m just learning atm, but why? Doesn’t it just add extra options for how your code can be used? They don’t have to be used that way I assume…
native navigation or expo router?
Umm it's both in the title and thumbnail? We are using Expo Router, and I recommend it!
I don't know why, for me, it works fine with both index files.
This was so helpful, I find Expo's documentation to be the worst I've ever seen
perfect up to the tabs part next time prepare before hand
Why you prefer Expo instead of CLI 80 percent apps are developed with CLI in market so plz start CLI tutorial
Expo is the future of React Native