React navigation v3.0   バージョンアップ、エラー対策　before   →  after 

2018年11月にReact Navigation がバージョンアップしました。 


それに伴い、エラーが出ているようです。

>
Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 youmust set up your app container directly. 

 
[公式文書](https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html)です。


困っている方々のために、参考記事と、私の拙いコードを記します。　 

　
　

こちらの動画は開発中の弁膜症アプリです。　もともと画面遷移は、
createStackNavigator と、createBottomTabnavigator を用いておりました。　

　
![ezgif.com-optimize (1).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/2e4ea932-de42-4195-f93a-2c8f546e9bbb.gif)


　

修正前のcode: 

```App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { Button, Icon } from 'react-native-elements';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import HomeScreen from './HomeScreen';
import EchoScreen from './EchoScreen';
import GuidelineScreen from './GuidelineScreen';
import AstreatScreen from './as/AstreatScreen';
import Severe2Screen from './ar/Severe2Screen';


const App = createStackNavigator({
  Home:           {screen: HomeScreen}, 
  Echo:           {screen: EchoScreen},
  Guideline:      {screen: GuidelineScreen},
  Severe2:        {screen: Severe2Screen},
  Astreat:        {screen: AstreatScreen},

}, {
    navigationOptions: {
      title: '弁膜症 アプリ',
      headerStyle: { backgroundColor : 'rgb(114,95,70)'},
      headerTitleStyle: {color: '#fff'},
      headerTintColor: "#fff",
      headerBackTitle: null,
      headerTitleStyle: {
        width: '92%',
        textAlign: 'center',
       },
    },
  });

const Echo = createStackNavigator({
    Echo:           {screen: EchoScreen},
});

const Guideline = createStackNavigator({
    Guideline:      {screen: GuidelineScreen},
});
  
  

export default createBottomTabNavigator({
  App:  {
    screen: App, 
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: () => (
        <Icon 
              name= {"home"} 
              size={22} 
        />
      )
    }     
  },
  Echo:  {
    screen: Echo,
    navigationOptions: {
      tabBarIcon: () => (
        <Icon 
          name= {"highlight"} 
          size={22} 
        />
      )
    }     
  },
  Guideline:{
    screen: Guideline,
    navigationOptions: {
      tabBarIcon: () => (
        <Icon name="import-contacts" size={20} />
      )
    }     
  }

}, {
tabBarOptions: { 

  activeTintColor: 'black', 
  inactiveTintColor: 'black',
  activeBackgroundColor: '#fff',
  inactiveBackgroundColor: '#fff',
  labelStyle: {} }
});
      
``` 



修正後のコード

```App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import LottieView from 'lottie-react-native';
import Anime from './AnimateScreen';
import { Button, Icon } from 'react-native-elements';
import {createStackNavigator, createBottomTabNavigator, createAppContainer} from 'react-navigation';

import HomeScreen from './HomeScreen';
import EchoScreen from './EchoScreen';
import GuidelineScreen from './GuidelineScreen';


import AstreatScreen from './as/AstreatScreen';

import Severe2Screen from './ar/Severe2Screen';

const App = createStackNavigator({

  Home:           {screen: HomeScreen}, 
  Echo:           {screen: EchoScreen},
  Guideline:      {screen: GuidelineScreen},
  Astreat:        {screen: AstreatScreen},
  Severe2:        {screen: Severe2Screen},

}, {
  defaultNavigationOptions: {
    title: '弁膜症 アプリ',
    headerStyle: { backgroundColor : 'rgb(114,95,70)'},
    headerTitleStyle: {color: '#fff'},
    headerTintColor: "#fff",
    headerBackTitle: null,
    headerTitleStyle: {
      width: '92%',
      textAlign: 'center',
     },
  },
});



const Echo = createStackNavigator({
  Echo:           {screen: EchoScreen},
});

const Guideline = createStackNavigator({
  Guideline:      {screen: GuidelineScreen},
});



const Tabs = createBottomTabNavigator({
App:  {
  screen: App, 
  navigationOptions: {
    tabBarLabel: 'Home',
    tabBarIcon: () => (
      <Icon 
            name= {"home"} 
            size={22} 
      />
    )
  }     
},
Echo:  {
  screen: Echo,
  navigationOptions: {
    tabBarIcon: () => (
      <Icon 
        name= {"highlight"} 
        size={22} 
      />
    )
  }     
},
Guideline:{
  screen: Guideline,
  navigationOptions: {
    tabBarIcon: () => (
      <Icon name="import-contacts" size={20} />
    )
  }     
}

}, {
tabBarOptions: { 
activeTintColor: 'black', 
inactiveTintColor: 'black',
activeBackgroundColor: '#fff',
inactiveBackgroundColor: '#fff',
labelStyle: {} }
});

export default createAppContainer(Tabs);
    
```


変更点は、
1. DefaultNavigationOption 
2. const Tabs = createBottomTabNavigator({...})
3. export default createAppContainer(Tabs) とする


 

です！　
皆様の参考になりますように〜


　
 


参考記事：
[React-Navigation v3の変更点](https://qiita.com/kana-t/items/366c9c07a4c81d6b6c1e)

[Invariant Violation: The Navigation props is missing for this navigator. In react-navigation 3 you must set app container](https://github.com/react-navigation/react-navigation/issues/5260)