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({

});

>
You need to go PRO to post comments.

Lessons in Build a React Native Application