Upgrade dependencies to react-navigation 4 and expo 36

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .git/objects/pack
+.expo/web

App.js

@@ -1,18 +1,18 @@
 import React, { Component } from "react";
-import { View } from "react-native";
-import { Container, Content, Picker, Button, Text } from "native-base";
-import Expo from "expo";
-
+import { AppLoading } from "expo";
+import * as Font from "expo-font";
+import { Ionicons } from "@expo/vector-icons";
 import HomeScreen from "./src/HomeScreen/index.js";
-export default class AwesomeApp extends Component {
+
+class AwesomeApp extends Component {
   constructor() {
     super();
     this.state = {
       isReady: false
     };
   }
   async componentWillMount() {
-    await Expo.Font.loadAsync({
+    await Font.loadAsync({
       Roboto: require("native-base/Fonts/Roboto.ttf"),
       Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
       Ionicons: require("native-base/Fonts/Ionicons.ttf")
@@ -21,8 +21,10 @@ export default class AwesomeApp extends Component {
   }
   render() {
     if (!this.state.isReady) {
-      return <Expo.AppLoading />;
+      return <AppLoading />;
     }
     return <HomeScreen />;
   }
 }
+
+export default AwesomeApp;

app.json

@@ -3,7 +3,7 @@
     "name": "ReactNavEg",
     "slug": "react-nav-eg",
 
-    "sdkVersion": "23.0.0",
+    "sdkVersion": "36.0.0",
     "androidStatusBarColor": "#334393",
     "androidStatusBar": {
       "barStyle": "light-content",

package.json

@@ -1,28 +1,38 @@
 {
   "name": "AwesomeApp",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "devDependencies": {
-    "react-native-scripts": "1.9.0",
-    "jest-expo": "23.0.0",
-    "react-test-renderer": "16.0.0"
+    "@babel/core": "^7.0.0",
+    "babel-preset-expo": "~8.0.0"
   },
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "react-native-scripts start",
-    "eject": "react-native-scripts eject",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios",
-    "test": "node node_modules/jest/bin/jest.js --watch"
-  },
-  "jest": {
-    "preset": "jest-expo"
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^23.0.4",
-    "native-base": "^2.3.5",
-    "react": "16.0.0",
-    "react-native": "0.50.3",
-    "react-navigation": "^1.0.0-beta.22"
+    "@react-native-community/masked-view": "^0.1.6",
+    "expo": "~36.0.0",
+    "expo-font": "~8.0.0",
+    "native-base": "^2.13.8",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-reanimated": "^1.7.0",
+    "react-native-safe-area-context": "^0.6.4",
+    "react-native-screens": "1.0.0-alpha.17",
+    "react-native-web": "~0.11.7",
+    "react-navigation": "^4.1.0",
+    "react-navigation-drawer": "^2.3.3",
+    "react-navigation-stack": "^2.0.16",
+    "react-navigation-tabs": "^2.7.0"
+  },
+  "resolutions": {
+    "react-navigation-tabs/react-native-tab-view": "2.11.0"
   }
 }

src/ChatScreen/JadeChat.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { AppRegistry, View, StatusBar } from "react-native";
+import { DrawerActions } from 'react-navigation-drawer'
 import { NavigationActions } from "react-navigation";
 import {
   Button,
@@ -34,7 +35,7 @@ export default class JadeChat extends React.Component {
           <Left>
             <Button
               transparent
-              onPress={() => this.props.navigation.navigate("DrawerOpen")}
+              onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}
             >
               <Icon name="menu" />
             </Button>

src/ChatScreen/LucyChat.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { AppRegistry, View, StatusBar } from "react-native";
+import { DrawerActions } from 'react-navigation-drawer';
 import { NavigationActions } from "react-navigation";
 import {
   Button,
@@ -33,7 +34,7 @@ export default class LucyChat extends React.Component {
           <Left>
             <Button
               transparent
-              onPress={() => this.props.navigation.navigate("DrawerOpen")}
+              onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}
             >
               <Icon name="menu" />
             </Button>

src/ChatScreen/NineChat.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { AppRegistry, View, StatusBar } from "react-native";
+import { DrawerActions } from 'react-navigation-drawer';
 import { NavigationActions } from "react-navigation";
 import {
   Button,
@@ -33,7 +34,7 @@ export default class NineChat extends React.Component {
           <Left>
             <Button
               transparent
-              onPress={() => this.props.navigation.navigate("DrawerOpen")}
+              onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}
             >
               <Icon name="menu" />
             </Button>

src/ChatScreen/index.js

@@ -2,55 +2,49 @@ import React, { Component } from "react";
 import LucyChat from "./LucyChat.js";
 import JadeChat from "./JadeChat.js";
 import NineChat from "./NineChat.js";
-import { TabNavigator } from "react-navigation";
-import {
-  Button,
-  Text,
-  Icon,
-  Item,
-  Footer,
-  FooterTab,
-  Label
-} from "native-base";
-export default (MainScreenNavigator = TabNavigator(
+import { createBottomTabNavigator } from "react-navigation-tabs";
+import { Button, Text, Icon, Item, Footer, FooterTab, Label } from "native-base";
+
+const MainScreenNavigator = createBottomTabNavigator(
   {
     LucyChat: { screen: props => <LucyChat {...props} /> },
     JadeChat: { screen: props => <JadeChat {...props} /> },
     NineChat: { screen: props => <NineChat {...props} /> }
   },
   {
-    tabBarPosition: "bottom",
     tabBarComponent: props => {
       return (
         <Footer>
           <FooterTab>
             <Button
               vertical
-              active={props.navigationState.index === 0}
+              active={props.navigation.state.index === 0}
               onPress={() => props.navigation.navigate("LucyChat")}
             >
               <Icon name="bowtie" />
               <Text>Lucy</Text>
             </Button>
             <Button
               vertical
-              active={props.navigationState.index === 1}
+              active={props.navigation.state.index === 1}
               onPress={() => props.navigation.navigate("JadeChat")}
             >
               <Icon name="briefcase" />
               <Text>Nine</Text>
             </Button>
             <Button
               vertical
-              active={props.navigationState.index === 2}
+              active={props.navigation.state.index === 2}
               onPress={() => props.navigation.navigate("NineChat")}
             >
               <Icon name="headset" />
               <Text>Jade</Text>
             </Button>
           </FooterTab>
         </Footer>
-      );
+      )
     }
   }
-));
+)
+
+export default MainScreenNavigator

src/HomeScreen/HomeScreen.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { DrawerActions } from 'react-navigation-drawer';
 import { StatusBar } from "react-native";
 import {
   Button,
@@ -23,7 +24,7 @@ export default class HomeScreen extends React.Component {
           <Left>
             <Button
               transparent
-              onPress={() => this.props.navigation.navigate("DrawerOpen")}
+              onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}
             >
               <Icon name="menu" />
             </Button>
@@ -37,7 +38,7 @@ export default class HomeScreen extends React.Component {
           <Card>
             <CardItem>
               <Body>
-                <Text>Chat App to talk some awesome people!</Text>
+                <Text>Chat App to talk some really awesome people!</Text>
               </Body>
             </CardItem>
           </Card>

src/HomeScreen/index.js

@@ -3,9 +3,10 @@ import HomeScreen from "./HomeScreen.js";
 import MainScreenNavigator from "../ChatScreen/index.js";
 import ProfileScreen from "../ProfileScreen/index.js";
 import SideBar from "../SideBar/SideBar.js";
-import { DrawerNavigator } from "react-navigation";
+import { createAppContainer } from 'react-navigation';
+import { createDrawerNavigator } from "react-navigation-drawer";
 
-const HomeScreenRouter = DrawerNavigator(
+const HomeScreenRouter = createAppContainer(createDrawerNavigator(
   {
     Home: { screen: HomeScreen },
     Chat: { screen: MainScreenNavigator },
@@ -14,5 +15,5 @@ const HomeScreenRouter = DrawerNavigator(
   {
     contentComponent: props => <SideBar {...props} />
   }
-);
+));
 export default HomeScreenRouter;

src/ProfileScreen/Profile.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { AppRegistry, Alert } from "react-native";
-
+import { DrawerActions } from "react-navigation-drawer";
 import {
   Text,
   Container,
@@ -59,7 +59,7 @@ Profile.navigationOptions = ({ navigation }) => {
     header: (
       <Header>
         <Left>
-          <Button transparent onPress={() => navigation.navigate("DrawerOpen")}>
+          <Button transparent onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
             <Icon name="menu" />
           </Button>
         </Left>

src/ProfileScreen/index.js

@@ -2,8 +2,8 @@ import React, { Component } from "react";
 import Profile from "./Profile.js";
 import EditScreenOne from "./EditScreenOne.js";
 import EditScreenTwo from "./EditScreenTwo.js";
-import { StackNavigator } from "react-navigation";
-export default (DrawNav = StackNavigator(
+import { createStackNavigator } from "react-navigation-stack";
+const DrawNav = createStackNavigator(
   {
     Profile: { screen: Profile },
     EditScreenOne: { screen: EditScreenOne },
@@ -12,4 +12,6 @@ export default (DrawNav = StackNavigator(
   {
     initialRouteName: "Profile"
   }
-));
+)
+
+export default DrawNav;

src/SideBar/SideBar.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { AppRegistry, Image, StatusBar } from "react-native";
+import { DrawerActions } from "react-navigation-drawer";
 import {
   Button,
   Text,
@@ -48,7 +49,10 @@ export default class SideBar extends React.Component {
               return (
                 <ListItem
                   button
-                  onPress={() => this.props.navigation.navigate(data)}
+                  onPress={() => {
+                    this.props.navigation.dispatch(DrawerActions.closeDrawer())
+                    this.props.navigation.navigate(data)
+                  }}
                 >
                   <Text>{data}</Text>
                 </ListItem>