Sign in Go Pro

Build a React Native Application

React Native Routing and Navigation with the React Navigation Library

This lesson is for PRO members.

Upgrade today to get access to all the PRO lessons.

Unlock this lesson

Up next



Mobile apps are made up of a variety of screens, and you need a way to compose those screens into a larger app.

There are many navigation libraries for React Native, but we will use a popular one called React Navigation.

The two most common screen paradigms are Tab and Stack, so we investigate each one, and see how to compose them into a single app.

Summary of Content:

  • Set up two tabs using TabNavigator
  • Setting up a StackNavigator
  • Compose both navigators into a single stack




StackNavigator and TabNavigator are depreciated , and now replaced by createStackNavigator and createBottomTabNavigator, so please update this lesson , as i have to invest alot of time to find and use new methods, and even had tabIcon issue, but overall its a great course, thumbs up (Y)

Ah yes, thank you for pointing that out. This lesson used React Navigation v1, but now that v2 is out, I'll have to update the lesson. Thanks!

FWIW, this is the code I used with the createBottomTabNavigator implementation, it took me a while to figure this out (but was kind of fun debugging the problem):

import React, {Component} from 'react';
import {
} from 'react-native';

import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';

import ToDoList from './src/components/TodoList'
import About from "./src/components/About";
import AddTodo from "./src/components/AddTodo"

const TodoNav = createStackNavigator(
TodoList: { screen: ToDoList },
AddTodo: { screen: AddTodo}
}, {
mode: 'modal'

const TabNav = createBottomTabNavigator({
TodoNav: { screen: TodoNav },
About: { screen: About }

const Apps = createAppContainer(TabNav)

type Props = {};
export default class App extends Component {
render() {
return (
<Apps \>

const styles = StyleSheet.create({});

You need to go PRO to post comments.

Lessons in Build a React Native Application