Nested React Navigation in React Native and Expo Apps | Stack Navigation Inside Bottom Tab | Code
HTML-код
- Опубликовано: 10 сен 2024
- Hello everyone, My name is Rohit.
Learn how to create a seamless and intuitive user experience with nested navigation in React Native and Expo! In this video, we'll walk through the process of implementing both bottom tab navigation and stack navigation, with a stack screen nested inside the bottom tab. This will give you a deeper understanding of how to effectively use both navigation components to create a clean and user-friendly interface. Whether you're a beginner or an experienced developer, this video is a must-watch for anyone looking to improve their navigation skills in React Native and Expo. Watch now and start building amazing, responsive navigation designs!
Topics covered:
✅ Project setup of react native & expo
✅ Use of react navigation in react native and expo
✅ Use of bottom tab navigation in react native and expo
✅ Use of stack navigation
✅ Use of stack navigation inside the bottom tab navigation
✅ Project demonstration
My social Links:
Instagram: / _ninza7
Discord: / discord
Twitter: / _ninza7
Website: ninza7.me
Video widgets edited by: / kaushal_2319
Music Source: RUclips Music Library
Keywords: react native, react native tutorial, react native app, react native project, react native tutorial for beginners, react native navigation, react native expo, react native full course, react native crash course, react native app development, react native app tutorial, react native app project, react native android, react native ios, react native android app, react native developer, react native CLI, react native crash course, create react native app, code step by step react native, react native design, deploy react native app, react native navigation, what is react native, react native projects, learn react native, react native setup, react native expo tutorial for beginners, react native UI, react native expo, expo react native, react native expo tutorial, small projects in react native, bottom tab navigation, stack navigation, nested navigation
Tags: #reactjs #javascript #reactnative #ios #android #react #expo
Literally the only video on this that's straight to the point, thanks a lot!
yeah! I try to keep things simple as possible. Keep supporting!
Yeah
Thank you so much. This video just stopped me from having a stroke
Someone is going to be pro developer soon, I guess. 😉
Thank you very much brother ❤❤❤❤
Absolutely understandable and clear explanation, thank you very much.
Glad it was helpful!
I am using authticator with firebase after authentication i will get to the homescreen and i have managed to get there, and i see bottom navigation here in this screen but if i navigate to other inapp features screens then i am not able to get this bottom navigation, but i need it in the screens i navigate through stack screen navigation, any suggestions?
Amazing work
can you hide the bottom tab when inside a nested stack ?
if you hide can you help me idk why but i cant
How to hide bottom tab navigation from the details screen?
thank you
You're welcome
My Application width is getting messed up!
The NavigationContainer is entirely rendering in a narrow width.
Even if I use styling, it is not rendering full width of application.
Please help!
check the width using dimensions.get('window').width
@@johnwesley2090 for whatever reason, disabling justifyContent: "center" at the top-most container, solved it!
Nothing else lol
The app was being rendered as center aligned, with what little space it got.
Thanks
May I know why my header of tab is still showing in the stack? That means there are two headers now at the detail screen.
check your App.js. You might be committing some mistakes
Thanks Buddy
Great video! I am learning expo router so now I have to decide which one to use. I wanted to ask you if you still recommend this over Expo Router?
it depends upon your app's functionality and use cases
The only downside is I need to lower my version in order for it to work is there any update so I don't need to lower the version?
No, it's not like that. In this video, I show how to follow the official docs. So, follow them, and you're all set.
I'm definitely subscribing
Welcome aboard! Samuel
what if i want to hide the bottom tab on specific screen?
Thanks for the Video!! For me, I'm getting two titles, one for the Tab name "Home", and below, the Stack name "HomeScreen".
If you are asking for a custom header. Then I recommend you to follow this one:
ruclips.net/video/mPKKLvhUSn4/видео.html
@@BugNinza I found out how to fix it. I only had to put a "options={{ headerShown: false }}" on the Tab.Screen that renders the other Stack, and it worked!! Thank you!!!
video starts at 3:21
For beginners, the video starts at 0:00 😁😌
hi can plz make video on drawer navigation (Menu) with inside one more drawer navigation (Submenu)...
it appears in whole app. how can i hide it in stack.screen login page
I’m sorry, I don’t quite understand. Are you asking about the header that appears throughout the entire app? If you want to hide it, you can simply set the headerShown option to false in the screenOptions prop of the Stack.Navigator component, like this:
Alternatively, if you want to add a custom header, you can follow this tutorial: ruclips.net/video/mPKKLvhUSn4/видео.html
thanku
Welcome 😊
thank you very much, you help me alot, you get one subscribe, like and share due to this amazing video
Thanks a lot 🙏 keep supporting ❤️
i love you