Skip to main content

Tell us about your project

Example React Native App with React navigation

In this article, we will go through the topic of how to set up an App with StackNavigator, DrawerNavigator, TabNavigator, and how to navigate using it.

First, we'll start with initiating the App and installing dependencies:

$ react-native init tutorial && cd tutorial

$ yarn add react-navigation

We'll create a folder src/ where all our App logic will be located. Inside we'll create a screens/ folder where we'll hold all our screens, then static/. In here we'll add our navigation structure in the router.js file. So let's create 6 files in the screen/ folder, named firstScreen.js, secondScreen.js,... sixthScreen.js, that will have nearly identical code, but with minor changes. This is the definition of our screens:


  1. import React, {Component} from 'react';
  2. import {View, Text, StyleSheet} from 'react-native';
  3. export default class FirstScreen extends Component {
  4.   render() {
  5.     return (
  6.       <view style="{styles.container}">
  7.         <text color:="" style="{{">Screen 1</text>
  8.       </view>
  9.     );
  10.   }
  11. }
  12. const styles = StyleSheet.create({
  13.   container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#222' }
  14. });

for all other screens we should change lines:

3: export default class FirstScreen extends Component {
where we'll change FirstScreen to the screen we are adding: FirstScreen, SecondScreen,... SixthScreen.

10: }}>
Screen 1: here we will change numbers 1-6.

You can change those values as you like, this is just to differentiate between various screens when navigating. You can change backgroundColor at line 21, to a different color for each screen.

Now that we have our screens, let's create our App navigation. DrawerNavigator which will have StackNavigator, with two screens, and TabNavigator. This TabNavigator will have TabNavigator inside. With this structure, we can explore basic navigation between screens, showing/hiding drawers on screens, how tabs work.

First, we create top most TabNavigator or TabNavigator inside TabNavigator. We'll call it SecondaryTab and it will get screens five and six. Tabs will be on top of the screen and the drawer will not be shown on those pages.


import React from 'react'; import { StackNavigator, DrawerNavigator, TabNavigator } from 'react-navigation'; import { NavigationActions } from 'react-navigation'; import FirstScreen from './../screens/firstScreen'; import SecondScreen from './../screens/secondScreen'; import ThirdScreen from './../screens/thirdScreen'; import FourthScreen from './../screens/fourthScreen'; import FifthScreen from './../screens/fifthScreen'; import SixthScreen from './../screens/sixthScreen'; const SecondaryTabs = TabNavigator({ ScreenFive: { screen: FifthScreen, navigationOptions: { tabBarLabel: 'Screen 5', } }, ScreenSix: { screen: SixthScreen, navigationOptions: { tabBarLabel: 'Screen 6', } } }, { tabBarPosition: 'top', });

Next, we create a Primary TabNavigator, that will have pages 3, 4, and 5, 6 in secondary TabNavigator, tabs will be on the bottom.


const primaryTabs = TabNavigator({ screenThree: { screen: thirdScreen, navigationOptions: { tabBarLabel: 'Screen 3', } }, secondaryTabs: { screen: secondaryTabs, navigationOptions: { tabBarLabel: 'Screens 5/6', header: null } }, screenFour: { screen: fourthScreen, navigationOptions: { tabBarLabel: 'Screen 4', } } }, { tabBarPosition: 'bottom', });

Now we'll create a Drawer. Because we want a header in our TabNavigator without having to create and add a header component to each screen of the TabNavigator, we'll incase it in StackNavigator. The drawer will have another StackNavigator where we'll add screens 1 and 2 with mutual navigation separately from TabNavigator.


const overAllNavigation = DrawerNavigator({ screenTab: { screen: StackNavigator({ Tabs: { screen: primaryTabs, navigationOptions: ({navigation}) =&gt; ({ title: 'Example App', headerLeft: { navigation.navigate('DrawerToggle') }}&gt;Menu }) } }) }, screenStack: { screen: StackNavigator({ screenOne: { screen: firstScreen, navigationOptions: ({navigation}) =&gt; ({ title: 'Screen 1', headerLeft: { navigation.navigate('DrawerToggle') }}&gt;Menu, headerRight: { navigation.navigate('screenTwo') }}&gt;Screen 2 }) }, screenTwo: { screen: secondScreen, navigationOptions: ({navigation}) =&gt; ({ title: 'Screen 2', headerLeft: { navigation.goBack() }}&gt;Back }) } }), navigationOptions: ({navigation}) =&gt; ({title: 'Screen 1/2'}) } }, { gesturesEnabled: false, drawerWidth: 240 }); export default overAllNavigation;

The last thing is to change the index.js so this navigation is the main component of the App.


Index.js import { AppRegistry } from 'react-native'; import App from './src/static/router'; AppRegistry.registerComponent('tutorial', () =&gt; App);