Build a React Native Application

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

});