Build complex layouts with Expo Router v2 and Expo SDK 49 | File Based Routing | React Native
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2023
- Hello everyone 👋, In this video you will learn about implementing any kind of layout with expo router v2 and using latest expo sdk 49, we will build stack/tabs navigations and very complex nested navigations. Build professions apps using expo router v2.
Github repo: github.com/syednomishah/learn...
Expo Router Installation: docs.expo.dev/routing/install...
Test Deep-linking: reactnavigation.org/docs/deep...
Add TailwindCSS in React Native: • Add Tailwind CSS In Yo...
Add Navigation in React Native: • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/syednoman
🚨 more videos on react native:
Food Recipe App : • 🔴 Build Food Recipe Ap...
Movie App : • 🔴 Build Movie App Usin...
Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Travel App UI : • 🔴 Travel App UI | Reac...
Weather App : • 🔴 Build Weather App Us...
Coffee App UI : • 🔴 Coffee App UI - Reac...
Food Delivery App : • 🔴 Build Food Delivery ...
TH-cam Clone App: • 🔴 TH-cam Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
react native expo router
expo router v2
expo router sdk 49
expo router tabs
tab navigation
expo router nested navigation
One of the best videos I have ever seen. Perfect. Made my day.
Great tutorial thank you! For your future tutorials what would be great is a at the end of small summary of how the concepts you've showed in the video works :)
Appreciate the video! You filled in some knowledge gaps I had!
@galaxies_dev deserves all the credits for this video. This dude didnt even bother to change the thimbnail.
Wow. That's so informative and really great. I have been looking for this kind of tutorial. Please make more. Thank you!!!
Thank you! Will do!
thankyou. great tutorial ❤
Awesome vid bro helped alot!!!!!!
Brilliant tutorial 🎉❤
You are awesome! Excellent tutorial, clear and concise, learned a lot. Thank you for all the effort you applied in making it. :)
Thank you 🙏
By far the best Expo Router tutorial.
Now can you show us how we take care of the initial routing regarding Safe Authentication and preventing some lages to appear to unauthenticated users. No need to use a real authentication service to keep it simple just a boolean that triggeres isLoggedin = false. then settimeout => true after 1 second. To mimick a real life application and how can we implement it in Expo Router
You can implement auth in expo router, follow this guide 👇
docs.expo.dev/router/reference/authentication
perfect i will apreciate for this knowledes
Nice video compare to others am seeing for expo router
Nice thank you so much for amazing content
Thanks, amazing 🎉
Thank you 👍
Thank you😊🎉❤
You gained my subscription
do you need to use the native stack navigation swipe animation? Or is the stack navigation merely conceptual and you can choose the animation yourself?
Great learing with you sir. Nicely explain routing, waiting for more content.
So can the tabs header background colour be changed, like that of the stack screen?
Good work 👌🏻
Excellent video, how do you make the routes typed when using ? I just created a project with expo v50
What a great tutorial! Thanks dude. Do you plan to make one on the SDK 50 and his new features ? Keep doing !
Sure, will do.
Great 🎉❤
presentation modal doesnt work, is it because im on android?
guys please,how can we change baground fon on top screen where written the name of the our components and how can we get away this
inscription?
npm i react-native-modalize
the modal is showing behing the tab
the modal
is showing behing
How incredible, wonderful this video is.
How could we do this if we log in to the app?
for the user to access the routes only after logging in, using expo router.
you can implement auth as well.
here is the reference: docs.expo.dev/router/reference/authentication
Excellent! Thank you for this video. Say, if I want to make the Post Details page take up the full screen (even above the bottom tabs), how would I do that?
You will have to create the post details screen in another stack
@@codewithnomi I see. Separate from the stack inside the (tabs) folder? Something like this?
(tabs)
index
_layout
posts
post-details
index
_layout
@@kral626 yup
Great tutorial. Please show how to make an animated drawer.
will do 😉
how to test this deeplinking in android
hi there ! does modal work on android ?????????????
Hi, I've been following your work and technically you're very good. but I would like to know how to rotate the cell phone screen next to vs code.......I don't know if you understood me
the background inside tab is not working
🎉
Nice, and drawer navigation not change ?
I'll create a video on this someday 😉
Why tsx instead of js? Is it mandatory to follow .tsx file?
No, you can use js
Can I hide tab bar when go to postId page?
You will have to create a separate stack layout for postId page
@@codewithnomi Thanks for replying.
I already added stack layout to [id] folder, but tabbar is still shows.
That is totally similar with Next js
yes
This is just like nextjs 13 app router
Sir plz make video how to . make Animated bottom Tabs with animated Drawer with navigation plz make this one with React native Reanimated
Ok I will try