Nested React Navigation in React Native and Expo Apps | Stack Navigation Inside Bottom Tab | Code
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- 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: TH-cam 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
God bless man, I had to create a quaick beginner react native project under 1 and 1/2 hours for a university assignment and pretty confused with fixing bugs with navigation. This helped a lot 🙏 greenings from Sri Lanka
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. 😉
Absolutely understandable and clear explanation, thank you very much.
Glad it was helpful!
Thank you very much brother ❤❤❤❤
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
Amazing work
video starts at 3:21
For beginners, the video starts at 0:00 😁😌
Thanks Buddy
thank you
You're welcome
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?
I found a problem that when i navigate to detail screen and then click profile tab. If i click again home tab it open the detail screen instead of home screen. Why?
I also found same issue. Are you able to resolve this. Basically two different navigator don't share stack. I guess.
I'm definitely subscribing
Welcome aboard! Samuel
Bro what's that emulator software
can you hide the bottom tab when inside a nested stack ?
if you hide can you help me idk why but i cant
Thanks
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.
why did you put expo in the title, if you're using React native cli :( ?
hi can plz make video on drawer navigation (Menu) with inside one more drawer navigation (Submenu)...
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.
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:
th-cam.com/video/mPKKLvhUSn4/w-d-xo.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!!!
How to hide bottom tab navigation from the details screen?
what if i want to hide the bottom tab on specific screen?
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
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: th-cam.com/video/mPKKLvhUSn4/w-d-xo.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 ❤️
no explaination just tutoring the what documentation has
i love you