Nested React Navigation in React Native and Expo Apps | Stack Navigation Inside Bottom Tab | Code

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: KZbin 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

[@thisisafact9181]

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

[@deapdool]

Literally the only video on this that's straight to the point, thanks a lot!

[@BugNinza]

yeah! I try to keep things simple as possible. Keep supporting!

[@bennyscode5856]

Yeah

[@Cermuel]

Thank you so much. This video just stopped me from having a stroke

[@BugNinza]

Someone is going to be pro developer soon, I guess. 😉

[@gurhanbatmaca]

Absolutely understandable and clear explanation, thank you very much.

[@BugNinza]

Glad it was helpful!

[@Punjabi_Movies_302]

Thank you very much brother ❤❤❤❤

[@waleefalrooh8]

thank you

[@BugNinza]

You're welcome

[@NaviBoyy]

Bro what's that emulator software

[@abelmurua6980]

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?

[@BugNinza]

it depends upon your app's functionality and use cases

[@nikhil9847]

Amazing work

[@ombhamare623]

Thanks Buddy

[@Cermuel]

I'm definitely subscribing

[@BugNinza]

Welcome aboard! Samuel

[@Kiran-bg3gj]

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?

[@siddhantkeshari4266]

video starts at 3:21

[@BugNinza]

For beginners, the video starts at 0:00 😁😌

[@TruthAdvocateGH]

Thanks

[@FarisNazhirah]

can you hide the bottom tab when inside a nested stack ?

[@adilxanimerov1273]

if you hide can you help me idk why but i cant

[@pablitoengineer]

Thanks for the Video!! For me, I'm getting two titles, one for the Tab name "Home", and below, the Stack name "HomeScreen".

[@BugNinza]

If you are asking for a custom header. Then I recommend you to follow this one: kzbin.info/www/bejne/o4GufH-snbqGpJY

[@pablitoengineer]

@@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!!!

[@azizatoumi2523]

why did you put expo in the title, if you're using React native cli :( ?

[@jananig1751]

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?

[@Scott-ox9td]

I also found same issue. Are you able to resolve this. Basically two different navigator don't share stack. I guess.

[@DlimsPunjab-l2w]

what if i want to hide the bottom tab on specific screen?

[@BugNinza]

[@araararara]

How to hide bottom tab navigation from the details screen?

[@nomad7317]

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!

[@johnwesley2090]

check the width using dimensions.get('window').width

[@nomad7317]

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

[@test-yu2vn]

hi can plz make video on drawer navigation (Menu) with inside one more drawer navigation (Submenu)...

[@ns-gabrielmendoza1329]

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?

[@BugNinza]

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.

[@botoi1118]

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.

[@BugNinza]

check your App.js. You might be committing some mistakes

[@hiii3763]

it appears in whole app. how can i hide it in stack.screen login page

[@BugNinza]

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: kzbin.info/www/bejne/o4GufH-snbqGpJY

[@anandgomaskar2210]

thanku

[@BugNinza]

Welcome 😊

[@meleseayichlie5645]

thank you very much, you help me alot, you get one subscribe, like and share due to this amazing video

[@BugNinza]

Thanks a lot 🙏 keep supporting ❤️

[@burnside398]

no explaination just tutoring the what documentation has

[@guillaumebenard8597]

i love you