React Native Navigation with Switch, Stack and Tab
This topic cover the navigation part of the react-native.
Navigation
Navigation is an important piece in an application. This allow users to navigate to the screen that they need. There are multiple approaches. I didn’t realize there were so many libraries on this until I saw this post. We will use react-navigation library for this since it is the official react native solution. We will only cover a few types: Stack, Switch and Tab navigation.
- Switch Navigation: This allows user to navigate between screens. It can only load one screen at a time. There is no back functionality by default and it reset the route when switching between screen. This is useful in authentication feature when you want to reset state between screen.
- Stack Navigation: Similar to switch navigation, this allows you to navigate between screen but it presents in an hierarchical way like master and detail page. This also provides the back functionality out of the box with screen title on top.
- Tab Navigation: We will use bottom tab navigation specifically. This shows evenly divided section as links on the bottom portion of the screen.
Switch Navigator
Let’s create switch navigator. First we need to add ‘react-navigation’ into the library by running:
npm install react-navigationThis will add this to the package.json:
"react-navigation": "2.0.0-rc.1"We just need to import as below:
import { createSwitchNavigator, createStackNavigator }
from 'react-navigation';Now for SwitchNavigation, simply use this:
const MySwitchNavigator = createSwitchNavigator({
routeOne: ScreenOne,
routeTwo: ScreenTwo,
routeThree: ScreenThree,
});The route name is where you use to switch between screen. You can also add a initial route using: initialRouteName: ‘routeOne’
To navigate to another route, use: this.props.navigation.navigate(‘routeThree’).
Stack Navigator
Similarly, with stack navigator, just change createSwitchNavigator to createStackNavigator. The rest of the format is the same including the navigate method.
To get header to screen, just use:
static navigationOptions = {
title: 'Screen Two'
};See complete code for Switch or Stack navigation below. Choose the navigation object between MySwitchNavigator or MyStackNavigator to see the appropriate one.
Tab Navigation
For Tab navigation, we will use the bottom tab navigator which shows the possible route on the bottom of the screen that you get used to in iOS.
Each of the tab can be link to a screen or another set of screen such as StackNavigator.
import { createBottomTabNavigator } from 'react-navigation';...const HomeStack = createStackNavigator({
Home: HomeScreen, Detail: DetailScreen
});const AppTabNavigator = createBottomTabNavigator({
Home: HomeStack,
App: ScreenOne,
Settings: ScreenTwo,
});
In this case, the Home route point to HomeStack which is a stack navigator consisting of two screens. While App and Settings routes point directly to one screen each.
This navigator has option to show icons for each of the tab with the property tabBarIcon.
Life cycle
A few points to understand about the life cycle of these navigations are that for SwitchNavigator, only one screen is active at a time. For StackNavigator, each earlier screen in the stack is still active. But when you leave the higher stack, those get cleared. For example if you navigate from ScreenOne to ScreenTwo, both are now active. then when you navigate back to ScreenOne, ScreenTwo will be removed from memory.
For the BottomTabNavigator, each screen in the tab is active if you navigate to all tabs. If the Home tab is a StackNavigator and you navigate from HomeScreen to DetailScreen, then go to another tab like Settings, then all three screen are active. Now if you navigate back to Home tab, it will show the DetailScreen that you were previously in.