Setting Up Navigation for your React Native App
*This tutorial is best suited for people new to using and nesting navigators within React Native. Assumptions that have been made are: you have gone through the set up process and already have a react app ready & you have stumbled across react-navigation.
You have made your login screen and a few other screens which you would like the user to access via a navigation drawer e.g. from a login screen to the home screen. However, as you are somewhat new to React Native and setting up the navigators is proving to be somewhat difficult because there are different navigators for different types of scenarios. For example, the drawer navigator is used if you would like a navigation drawer .
What is a navigator?
Simply put, a navigator is a component that holds routes which map directly to a screen you have created. When you navigate with react-navigation you shall call the name of the route.
What are the types of navigators?
Within React Native there are various kinds of navigators that you can use depending on what you would like to achieve. Below are a few examples:
- Stack Navigator: Most basic navigation which allows for moving from one screen to another via the click of a button or touchable element.
- Drawer Navigator: This creates a navigation drawer which is used for moving from screen to screen. e.g. the gmail app menu/navigation drawer
- Tab Navigator: This creates a tab navigator/menu which allows you to shift from screen to screen e.g. the whatsapp menu/tab navigation
In order to create an app with a login screen that navigates to a view with a navigation drawer, you would need to nest a drawer navigator within a stack navigator, which is something I struggled with when I was first starting out.
Today we are going to look at how to set up nested navigation for your React Native app, with a stack and drawer navigator. Ideally upon completion you should have a drawer navigator nested within a stack navigator.
-StackNavigator (i.e. Login Screen)
-DrawerNavigator (i.e. Other app screens that are accessed via a navigation drawer )Let’s go!
Step One
Create a 3 files: a login screen(loginScreen.js), screen one(screenOne.js) and screen two(screenTwo.js). Once these views are created and complete leave them, we will come back to them when we need to navigate. Ensure you have a button or any touchable element.
For example:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';export default class Login extends Component {
render() {
return (
<View>
<TouchableOpacity >
<Text style={styles.signUpThin}>Login</Text>
</TouchableOpacity>
</View>
);
}
}const styles = StyleSheet.create({
//add your styles here
});
Step 2
Create an app.js file where you will create and populate your stack navigator. Import the stack navigator from react-navigation. In order to populate your stack navigator you shall need to import the files for the screens you have just created and map them to a route title which you shall call during navigation.
import React, { Component } from 'react';
import {
AsyncStorage,
StyleSheet,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';import LoginScreen from './login';
import ScreenOne from './screenOne.js';const myStackNavigator= StackNavigator({
LoginRoute: { screen: LoginScreen },
ScreenTwoRoute: {
screen: ScreenOne,
headerStyle:{
backgroundColor:'#000000'
},
headerTintColor:'#ffffff'
},
},
);export default class App extends Component {render() {return (
<myStackNavigator/>);}
}
Set up all the routes required for the screens as you see above. The first route should be the first screen you want to see when your app launches. Return your navigator constant within the class as you see above.
You have probably noticed that react-native does not come with a default splash screen, don’t worry, we shall go through that at a later date.
Step 3
Within your index.android.js/index.ios.js/index.js file(s) add the following and register your component:
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import app from './app/components/app.js'AppRegistry.registerComponent('yourpackagename', () => app);
This shall ensure that app.js is the first component loaded on app launch.
Step 4
Create a file called drawerNavigator.js . Within this file you shall import your drawer screens and map each screen to a route as well. Additionally, you shall customize and style your drawer here.
Don’t forget to export your drawer constant!
import React, {Component} from "react";
import {AppRegistry, ScrollView, Text, View, StyleSheet} from "react-native";
import {
DrawerItems,
DrawerNavigator,
DrawerView,
StackNavigator,
} from "react-navigation";import Icon from 'react-native-vector-icons/Feather';import ScreenOne from './screenOne.js'
import ScreenTwo from './screenTwo.js';const DrawerContent = (props) => (
<ScrollView>
<View
style={{
height: 180,
backgroundColor:'rgba(0, 145, 150,1)'
}}
><GeneralHeader/>
</View>
<DrawerItems
activeTintColor = "rgba(0, 145, 150,1)"
labelStyle={{
fontFamily:'sans-serif'
}}
{...props}
/>
</ScrollView>
)const NavDrawer = DrawerNavigator({
ScreenOneRoute: {
screen: ScreenOne,
navigationOptions: {
title: 'Screen One',
drawerLabel: 'Screen One',
drawerIcon: () => (
<Icon name="eye" size={15} color="#808080"/>
)
},
},
ScreenTwoRoute: {
screen: ScreenTwo,
navigationOptions: {
title: 'Screen Two',
drawerLabel: 'Screen Two',
drawerIcon: () => (
<Icon name="map-pin" size={15} color="#808080"/>
)
},
},},{
contentComponent: DrawerContent,
},
);export default NavDrawer;
Step 5
Go back to your app.js file and edit your stack navigator. Remove all mentions of screen one, and add the exported navigation drawer (give it a route, and treate the imported drawer as a screen).
import React, { Component } from 'react';
import {
AsyncStorage,
StyleSheet,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';import LoginScreen from './login';
import ScreenOne from './screenOne.js';// remove this line
import NavDrawer from './drawerNavigator.js';const myStackNavigator= StackNavigator({
LoginRoute: { screen: LoginScreen },
DrawerRoute: {
screen: NavDrawer,
headerStyle:{
backgroundColor:'#000000'
},
headerTintColor:'#ffffff'
},
},
);export default class App extends Component {render() {return (
<myStackNavigator/>);}
}
Step 6
Finally, go back to the login screen and utilise the onPress method and this.props.navigation.navigate to navigate from the login screen to screen one (within the nested drawer navigator)!
Don’t forget you can use navigation to pass important props (we will get into this much later!).
Utilise this technique to navigate from screen to screen despite the type of navigator you have used i.e. this.props.navigation.navigate(‘RouteName’, {paramKey: paramValue})
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';export default class Login extends Component {
render() {
return (
<View >
<TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerRoute', {params: param})}>
<Text style={styles.signUpThin}>Login</Text>
</TouchableOpacity></View>
);
}
}const styles = StyleSheet.create({//add your styles here
});
You’re Done!
Obviously there is more to it than this, however this short tutorial was was best suited for beginners who are starting to grasp the concept of navigators and how to use them within React Native. For more information please read the react-navigation docs or ask away in the comments.
