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
Autoplay

Up next

Previous

About

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

Instructor

Links

Comments

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):

```javascript
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View
} 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({});
```

I tried Mike Wolfson solution and also the Sample Code solution, but my app is broken.
After this lesson, my app is broken.

Are you getting a particular error? What is going wrong?

I am getting tons of errors. See:
http://bit.ly/2JTsBVw

Perhaps try this? https://stackoverflow.com/questions/55358811/error-unable-to-resolve-module-react-native-gesture-handler

yarn add react-native-gesture-handler

Your link helped me solving those errors.

But now, newer errors appeared. See:
http://bit.ly/2oXmuZ8

So I Googled a little and executed some commands. First, those 2 commands, advised be you via the Stack Overflow link:

$ yarn add react-native-gesture-handler
$ react-native link react-native-gesture-handler

Then, other 4 commands, to link libraries 'react-navigation-tabs' and 'react-navigation-stack':

$ yarn add react-navigation-stack
$ react-native link react-navigation-stack
$ yarn add react-navigation-tabs
$ react-native link react-navigation-tabs

This is the source code of my App.js:

```
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';

// import { TabNavigator, StackNavigator } from 'react-navigation'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

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 },
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#0066cc'
}
})

const Apps = createAppContainer(TabNav)

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

);
}
}

const styles = StyleSheet.create({
});
```

It looks like you're also missing "react-native-reanimated", so you'll want to add that - and then it can't find "StackNavigator", but you're not using that anymore, so I'm not sure if that's an old error you posted, or if it's used somewhere else in your code?

This tutorial does need to be updated for the latest version of react-navigation - sorry about that!

Now it works!

I added those 2 imports, and now it works:

$ yarn add react-native-reanimated
$ react-native link react-native-reanimated

Thanks for your tip!

Also, I ask you to update this current lesson in order to avoid future students to suffer like I suffered here!

Ah! Glad that worked... yes - I'll need to update the lesson. Thanks!

Here is my final source code from App.js:

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';

// import { TabNavigator, StackNavigator } from 'react-navigation'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import Animated from 'react-native-reanimated';

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 },
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#0066cc'
}
})

const Apps = createAppContainer(TabNav)

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

);
}
}

const styles = StyleSheet.create({

});

>

Lessons in Build a React Native Application

1. Installing React Native and Creating Your First React Native App
02:17
Chris Achard
2. Editing the React Native Component to Display Data on the UI
03:20
Chris Achard
3. Extracting and Writing React Native Components
03:23
Chris Achard
4. Debugging Errors in React Native
03:41
Chris Achard
5. Reuse Components with Props in React Native
01:57
Chris Achard
6. Make React Native Components Dynamic with State
03:11
Chris Achard
7. Dynamically Rendering Components in React Native
Pro
01:28
Chris Achard
8. Rendering Lists in React Native with ScrollView and FlatList
Pro
02:06
Chris Achard
9. Styling React Native Components
Pro
04:18
Chris Achard
10. Layout Components in React Native with Flexbox
Pro
03:28
Chris Achard
11. Installing and Using Third Party React Native Libraries
Pro
03:31
Chris Achard
12. React Native Routing and Navigation with the React Navigation Library
Pro
03:48
Chris Achard
13. Reacting to Input Events with React Native Controlled Components
Pro
02:23
Chris Achard
14. Setting State in React Native with setState
Pro
03:03
Chris Achard
15. Exploring Lifecycle Methods in React Native
Pro
02:18
Chris Achard
16. Consuming a Node.js HTTP API in React Native
Pro
05:16
Chris Achard
17. Displaying Images and Icons in React Native
Pro
04:26
Chris Achard
18. Deleting a ToDo Item from a React Native List
Pro
01:31
Chris Achard
19. Refactoring Network Code into a React Native Shared Library
Pro
01:38
Chris Achard
20. Platform Specific React Native Code and Styles
Pro
03:13
Chris Achard
21. Filtering Data with a React Native Segment Component
Pro
02:01
Chris Achard
22. Deploying a React Native Application to a iOS or Android Device
Pro
02:17
Chris Achard
23. Building a React Native Android APK for Google Play
Pro
02:12
Chris Achard
24. Building a React Native iOS IPA file for the App Store
Pro
01:29
Chris Achard