DEV Community

Cover image for Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5

Combining Stack, Tab & Drawer Navigations in React Native With React Navigation 5

Ekunola Ezekiel on June 22, 2020

In this article, we'll be covering the different types of navigations and also how to combine them together in react-native using react-navigation ...
Collapse
 
gauravmahendru profile image
Gaurav Mahendru

I have made a Tab Navigator for my React Native App and I want to call this tab navigator with a click of a button. Currently, I have a SignUpScreen and SignInScreen and the button I want to call is inside SignInScreen with the props called { navigation } with the function but the button is throwing an error of undefined 'navigation.navigate' object. My Tab Navigator works perfectly fine but I am not able to call it on this Login button, is there something to do with Stack Navigator here? I am calling Tab Navigator to my HomeScreen and this HomeScreen inside the Login Button. Any help will be appreciated.

Collapse
 
easybuoy profile image
Ekunola Ezekiel

So I'm guessing the way your navigation is set up is that your Tab navigation is calling the Stack navigation, and the Tab navigation is being used in the App.js entry point to the app right?

Collapse
 
gauravmahendru profile image
Gaurav Mahendru

Actually, Tab Navigation (I am using this inside return function of a HomeScreen) should be called on a button but it’s not working.

For the App.js, right now I have made SignInScreen as my entry point which comes from AppTextInput file and this AppTextInput.js file has a button to call Tab Navigation, but unluckily, I am getting an error of undefined navigation.navigate even though I am using the navigation props with the function.

Thread Thread
 
easybuoy profile image
Ekunola Ezekiel

I think the issue is you need to return a navigation (tab navigation which contains the stack screens) in the app.js file, just like it's shown in this article. You can set the default screen to show up on the first app load.

Thread Thread
 
gauravmahendru profile image
Gaurav Mahendru

My default screen is SignInScreen and this screen has a button to it. On a click of this, I want to go to Tab Navigation which I created.

It's giving me navigation error even though I am using navigation as a props with the SignInScreen return function. Normally, I have tested my Tab Navigation by straight calling it into App.js. This works but I want this to be called on Button. It's not working for me.

Collapse
 
mirko1075 profile image
Mirko

Hi, thanks for the great article. My question is, what if I need to have the 2 navigation together? Drawer + bottom tab navigation? Where should I import and put the bottom tab navigator? In App.js? How can I nest them? Thank you in advance

Collapse
 
masoud94 profile image
Masoud-94

Thanks a lot for putting time and effort into writing this.
This article was very helpful, but I have a small issue.

In drawer navigation, when I go forth and back in my screens, the screen freezes.
In the beginning, I search all of my code but didn't find anything,
finally, I came across one example in Reac Navigation Documentation, and I ran it in my Expo and saw similar behaviour.

I was wondering that have you ever experience this? What causes this issue?
Any suggestion will be helpful.

Collapse
 
easybuoy profile image
Ekunola Ezekiel

I haven't had that error, unfortunately. Maybe try google that particular error to see if other people have faced that issue.

Collapse
 
monir_ullah_e6c710c737119 profile image
Monir Ullah

Great article, Ekunola! Your guide on combining Stack, Tab, and Drawer navigation in React Native is super clear and helpful. Thanks for the step-by-step instructions. I got my project working! Just one question: How can I add custom icons to the Tab Navigator items? Thanks!

Collapse
 
seankang profile image
Seankang(he, him, dude, guy)

How about doing this with classes? For example, if Home was defined as :

Anyone written a sample or template like this?

class Home extends React.Component{
render() {

This is the home screen

}
}

Collapse
 
ivanbarbai profile image
IvΓ‘n Barba • Edited

Hey thank you very much for this tutorial, i'm making an app based on this, but the header its being duplicated, i've searched trough youtube and the official documentation but i didn't find anything, any help'll be appreciated πŸ™. dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
pyaehphyoe profile image
Pyaeh Phyoe Ko Ko
<Tab.Navigator screenOptions={{headerShown: false}}>
    <Stack.Navigator screenOptions={{headerShown: false}}>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
scribbletons profile image
ScribbleTons

Thanks for the article. How do I make the tabpress fast enough when switching from one route to another. I'm using expo and it's almost unresponsive when tapped.

I even turned off my debugger and it's still the same.

The JS thread falls to almost -2 to 0.

It's really frustrating.

Collapse
 
lucasmichailian profile image
Lucas Michailian

Hi! Great Article, Can I hide tab bar on nested About ?

Collapse
 
easybuoy profile image
Ekunola Ezekiel

Yes, you should be able to hide the tab bar on specific screens by passing tabBarVisible as a prop to the navigation options I think

Collapse
 
niranjan2210 profile image
Niranjan Nagaraja

I have a Drawer with several screens to navigate to.
I have a bottom tab navigator with 5 entries.
Now when I open the drawer and select a screen that is not in Bottom tab navigator, I can navigate to that screen but the Bottom Tab Navigator dissappears.
How do I retain the Bottom Tab when I navigate to a screen from the drawer which is not part of the Bottom Tab?

Collapse
 
deepugupta899 profile image
Deepanshu

i have a major issue if define a screen inside drawer.navigation with Drawer.Screen .....then between those pages i dont get sliding animation when i navigate from one page to another page....it happpens with only those pages which are defined as Drawer.Screen....please help someone

Collapse
 
hamza_shahid_7a8c3d3fff8d profile image
Hamza Shahid

How can we combine all of them, like i am able to call my drawer in my stack navigator but what if i want to add bottom tab navigations too, if we have drawer, tabs and navigations in the same screen like facebook has.

Collapse
 
ahmedsarhan profile image
Ahmed Sarhan

when I do the same thing you did here and name the MainStackNavigator, the TabNavigator and the HomeScreen all three Home in their own respective Stacks / Navigators
React Native throws a warning that multiple nested components have the same name, is this a big issue? also I want to toggle my drawer from a button in the bottom tabs is there a way to do so ?

Collapse
 
ytliusvn profile image
Penny Liu • Edited

No tabs appear when you toggle Contact item of Drawer Navigation.

Collapse
 
shirkan profile image
Liran Cohen

Great article and very useful, thanks for taking the time to post it.

Collapse
 
satenchauhan profile image
Saten Chauhan

I am so thankful to you , made tutorials on all navigation, which is awesome, very useful, I solved my problem

Collapse
 
easybuoy profile image
Ekunola Ezekiel

I'm glad you found it helpful!

Collapse
 
yoel profile image
Yoel • Edited

The excellent article Thank you,
Is it possible to choose which screen to switch from the drawer menu?
like this

component={ContactStackNavigator,{screen: 'menu"}}

`

Collapse
 
sydismynameok profile image
Syd

This tutorial is lightyears better than the official React Navigation tutorial on Reacts website.

Collapse
 
easybuoy profile image
Ekunola Ezekiel

Thanks

Collapse
 
senatorsanchez profile image
Clay Sanchez

This was very helpful. Thank you!

Collapse
 
bashirmohamedali profile image
BashirMohamedAli

thanks

Collapse
 
theca profile image
theca

Hi. Thanx for your tutorail. Is it possible to create a clickable button for DrawerNavigation?

Collapse
 
easybuoy profile image
Ekunola Ezekiel

Yes, it's possible, you can still the entire drawer however you want to. Take a look at the drawerContent prop for a Drawer navigator

Collapse
 
vicman2 profile image
Offordile Chimaobi Victor

Hey! you just saved a soul today. Thanks alot.

Collapse
 
lakshan28 profile image
lakshan28

really appreciated

Collapse
 
_udemezue profile image
Udemezue John

Thanks bro, I just solved a long term problem reading your tutorials

Collapse
 
eshaghiehsan profile image
EshaghiEhsan

hi
thanks for this article
I want About screen be a separate screen and tab navigator is hide
what should I do?

Collapse
 
dscg profile image
dscg

thank you very much for this tutorial

Collapse
 
elizasilveira profile image
eliza-silveira

THANK YOU!

Collapse
 
khalafalla profile image
khalafalla

Awesome, but that's made the first item in Drawer slider useless

Collapse
 
tatz21 profile image
Debdip Mondal

how can i insert icons in tab navigator items

Collapse
 
ashishonmobile profile image
ashishonmobile

If we switch from one stack navigation to another stack navigation via drawer how can we refresh the screen which is available in each stack navigation?

Thanks

Collapse
 
abnerluisz profile image
Autentico

Is it possible for me to combine Stack and Drawer on the same screen?

Collapse
 
javieraranedap profile image
Javier Araneda

thank you!!

Collapse
 
ali_raza_9b1af71f7cb05eac profile image
ali raza

so easy and thanks by your help I understand today navigation in react native.
Thanks a lot** Ekunola Ezekiel**

Collapse
 
v1taliy88 profile image
Vitalii Hetman

Thanks a lot !