React Native Show Tab Navigator Inside Drawer Navigator Example Tutorial

Tab Navigator inside Drawer Navigator is used by hundreds of mobile applications where developer wants to manage multiple activities(screen) in single mobile app. Tab Navigator show all the screens into a single screen with already implemented animated swipeable feature, Activity names will show at the top of the mobile app. In Drawer Navigator there is a slide menu panel present at the left side of screen which contains all the screen names as menus and when user clicks any of them it will open a new activity. So in this tutorial we would going to implement Tab Navigator Inside Drawer Navigator in react native android iOS mobile app Example Tutorial.

Screenshot : Below is the screenshot of our application.

Contents in this project Show Tab Navigator Inside Drawer Navigator in React Native Android iOS App Example Tutorial :

1. Before getting started we need  to install the latest version of React Navigation library in our project to use the activity implementation structure. To install react navigation in your project open your project folder in CMD – Terminal and execute below command.

Screenshot of CMD:

2. Next step is to install the react-native-gesture-handler library in your react native app. So again open your project folder in command prompt or Terminal and execute the below command.

Screenshot:

3. Now we need to execute react-native link command in your react native project. This command will re-arranged your complete react native project and index all the newly installed libraries in it.

Screenshot:

4. Now there is no extra steps for iOS configuration.

5. To configure the react-native-gesture-handler library for react native project we need to add some additional libraries in our MainActivity.java file.

So goto YourProject – > android -> app -> src- >main -> java -> com-> YourProject -> MainActivity.java file.Open MainActivity.java file in edit mode in notepad or any text editor and put below files.

You need to also put the return function for ReactActivityDelegate.

Complete source code of MainActivity.java file, It will help you to understand all the changes after adding above code:

6. Now your project is good to go, Its time to start coding 🙂 .

7. Open your react native project folder and open App.js file and import StyleSheet, Text, View, Button, TouchableOpacity and Image component in your project.

8. Import createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator and createStackNavigator component from react navigation library in your project.

createAppContainer : This component is used as main default export parent, Means if you have created any Tab Navigator or Drawer navigator or Stack Navigator in your project. At the final step you have to call them using createAppContainer.

createMaterialTopTabNavigator : Is used to creating material style top level tab navigation in react native for both android and iOS mobile apps.

createDrawerNavigator : Is used to create navigational drawer in both android and iOS mobile applications.

createStackNavigator : Its make the every individual class as an Activity screen.

9. Creating a class named as HamburgerIcon in your project. This class is used to put a Hamburger Icon at the top left side of Drawer Navigator.

this.props.navigationProps.toggleDrawer() : We would call this function on Hamburger icon click event, This function will open and close the navigational drawer.

10. Creating 2 Activity classes named as Home_Screen and Settings_Screen. These 2 classes is will be grouped together and shows inside Tab Navigator.

title : Is used to show the activity title in Title bar.

Screenshots:

Show Tab Navigator Inside Drawer Navigator

11. Creating another two classes named as Student_Screen and Details_Screen. These classes is also grouped together as Tab Navigator.

Screenshots:

12. Creating a constant view named as Tab_1 with createMaterialTopTabNavigator component and pass the two activity classes Home_Screen and Settings_Screen inside it. This will group them together as a Tab Navigator.

13. Creating another constant view named as Tab_2 and with createMaterialTopTabNavigator component and pass the another two renaming activities Student_Screen, Details_Screen inside it. It will also group them together and make another tab navigator view.

14. Next step is to pass the both Tab_1 and Tab_2 Views into individual createStackNavigator views. This will make the complete Tab Navigator View into Stack navigator. So create 2 createStackNavigator views named as First_2_Tabs and Second_2_Tabs in your project.

15. Create a constant named as MyDrawerNavigator with createDrawerNavigator component and pass both the First_2_Tabs and Second_2_Tabs inside it as individual screens. Now at the final step we need to pass the complete MyDrawerNavigator into createAppContainer component in order to show on screen.

16. Creating Style.

17. Complete source code for App.js File :

Screenshots:

Show Tab Navigator Inside Drawer Navigator

37 Comments

  1. Superb bro.. thank you very much.. i will try and informed you

  2. StackNavigation in not working pls help
    it show me:
    undifined is not a function

  3. When i create new project in cmd terminal it gives me too much errors and “Complete log of this error is belongs in Expo/something” please help me to for creating new project with expo…

  4. Hi Admin
    I am getting undefined is not a function (evaluating ‘(0,_reactNavigation.createMaterialTopTabNavigator)’) error.
    Please help me.

  5. Hi Admin, my scenerio is – I have 2 tabs in Profile.js, in 2nd tab I am showing profile data and have 2 buttons, Edit and delete. On clicking Edit button, goes to edit detail page and after updating am redirecting it back to Profile.js, but my updated data is not visible unless am refreshing the page. (My assumption is, after redirecting 2nd tab’s class is not calling up)How to resolve it?
    Its something urgent, please reply ASAP.

    • Prity simply call the updated data function in componentdidmount() function so when you come back on profile.js page it will call the new data from server.

  6. Hai bro,How to add tab with listview ?

  7. halo bro, How to use a Custom top tab bar and Custom bottom tab bar in 1 page for React Native

  8. Hi Admin. Thanks for posting.
    I am new to React Native and I am learning myself.
    Your post is helpful for me. Then I have a question.
    You put First_2_Tabs and Second_2_Tabs inside DrawerNavigator and they included Tab_1 and Tab_2 with stackNavigators separately.
    I am not sure why you put stack navigators at this point.
    Is it possible to put Tab_1 and Tab_2 inside DrawerNavigator directly?

    I am really looking forward to hearing from you.
    Thanks.

    • Thanks for comment Jordan. To make the tab navigator fully compatible with low memory devices its important to use this type of structure 🙂 .

  9. Thanks for your reply.

    Is it possible to give a example so that I can get clear idea?
    I think it’s important to understand navigation clearly since it’s basic structure of app.
    Actually I have developed native mobile apps so far.

    Also in all case, should I wrap tab navigator with stack navigator?

  10. Cool! Thanks.
    I really want to hear from you.
    Thanks for your support.

  11. Sorry, when can you share your examples with me?

  12. No problem. 🙂
    I will wait for your response.
    Thanks for support.

  13. showing some blank screen with warning like viewer page android has be extracted from react native core and will be reamoved
    in future realease

  14. how to add profileicons to this code

  15. In the sidebar where home menu bar and student menu bar are there in the code

  16. Thanks! How to wrap a tab navigator and add a floating button?

Leave a Reply

Your email address will not be published. Required fields are marked *