Update react-navigation to the latest version 🚀 (#293)

* fix(package): update react-navigation to version 2.0.0

* Code updated to support breaking changes of react-navigation

app/containers/Sidebar.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ScrollView, Text, View, StyleSheet, FlatList, TouchableHighlight } from 'react-native';
 import { connect } from 'react-redux';
+import { DrawerActions } from 'react-navigation';
 
 import database from '../lib/realm';
 import { setServer } from '../actions/server';
@@ -64,16 +65,9 @@ export default class Sidebar extends Component {
 		database.databases.serversDB.removeListener('change', this.updateState);
 	}
 
-	onItemPress = ({ route, focused }) => {
-		this.props.navigation.navigate({ key: 'DrawerClose', routeName: 'DrawerClose' });
-		if (!focused) {
-			this.props.navigation.navigate(route.routeName, undefined);
-		}
-	}
-
 	onPressItem = (item) => {
 		this.props.selectServer(item.id);
-		this.props.navigation.navigate({ key: 'DrawerClose', routeName: 'DrawerClose' });
+		this.props.navigation.dispatch(DrawerActions.closeDrawer());
 	}
 
 	getState = () => ({

app/containers/routes/AuthRoutes.js

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { StackNavigator, DrawerNavigator } from 'react-navigation';
+import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
 
 import Sidebar from '../../containers/Sidebar';
 import RoomsListView from '../../views/RoomsListView';
@@ -18,7 +18,7 @@ import RoomMembersView from '../../views/RoomMembersView';
 import RoomInfoView from '../../views/RoomInfoView';
 import RoomInfoEditView from '../../views/RoomInfoEditView';
 
-const AuthRoutes = StackNavigator(
+const AuthRoutes = createStackNavigator(
 	{
 		RoomsList: {
 			screen: RoomsListView
@@ -125,7 +125,7 @@ const AuthRoutes = StackNavigator(
 	}
 );
 
-const Routes = DrawerNavigator(
+const Routes = createDrawerNavigator(
 	{
 		Home: {
 			screen: AuthRoutes

app/containers/routes/NavigationService.js

@@ -1,4 +1,4 @@
-import { NavigationActions } from 'react-navigation';
+import { NavigationActions, StackActions } from 'react-navigation';
 
 const config = {};
 
@@ -24,7 +24,7 @@ export function goBack() {
 
 export function goRoomsList() {
 	if (config.navigator) {
-		const action = NavigationActions.reset({
+		const action = StackActions.reset({
 			index: 0,
 			actions: [NavigationActions.navigate({ key: 'RoomsList', routeName: 'RoomsList' })]
 		});
@@ -41,7 +41,7 @@ export function goRoom({ rid, name }, counter = 0) {
 		return setTimeout(() => goRoom({ rid, name }, counter + 1), 100);
 	}
 
-	const action = NavigationActions.reset({
+	const action = StackActions.reset({
 		index: 1,
 		actions: [
 			NavigationActions.navigate({ key: 'RoomsList', routeName: 'RoomsList' }),

app/containers/routes/PublicRoutes.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import { StackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import ListServerView from '../../views/ListServerView';
@@ -19,7 +19,7 @@ const hasServers = () => {
 	return db.length > 0;
 };
 
-const ServerStack = StackNavigator({
+const ServerStack = createStackNavigator({
 	ListServer: {
 		screen: ListServerView,
 		navigationOptions({ navigation }) {
@@ -55,7 +55,7 @@ const ServerStack = StackNavigator({
 	initialRouteName: hasServers() ? 'ListServer' : 'AddServer'
 });
 
-const LoginStack = StackNavigator({
+const LoginStack = createStackNavigator({
 	Login: {
 		screen: LoginView,
 		navigationOptions: {
@@ -73,7 +73,7 @@ const LoginStack = StackNavigator({
 	headerMode: 'screen'
 });
 
-const RegisterStack = StackNavigator({
+const RegisterStack = createStackNavigator({
 	Register: {
 		screen: RegisterView,
 		navigationOptions: {
@@ -98,7 +98,7 @@ const RegisterStack = StackNavigator({
 	headerMode: 'screen'
 });
 
-const PublicRoutes = StackNavigator(
+const PublicRoutes = createStackNavigator(
 	{
 		Server: {
 			screen: ServerStack

app/views/RoomsListView/Header/index.js

@@ -124,7 +124,7 @@ export default class RoomsListHeaderView extends React.PureComponent {
 			<View style={styles.left} accessible accessibilityLabel="Server's list" accessibilityTraits='button'>
 				<TouchableOpacity
 					style={styles.headerButton}
-					onPress={() => this.props.navigation.navigate({ key: 'DrawerOpen', routeName: 'DrawerOpen' })}
+					onPress={() => this.props.navigation.openDrawer()}
 				>
 					<FastImage
 						style={styles.serverImage}

package-lock.json

@@ -4919,6 +4919,15 @@
         "object-assign": "4.1.1"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "gud": "1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -8059,6 +8068,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
@@ -14302,9 +14316,9 @@
       }
     },
     "react-lifecycles-compat": {
-      "version": "1.1.4",
+      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-1.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-g3pdexIqkn+CVvSpYIoyON8zUbF9kgfhp672gyz7wQ7PQyXVmJtah+GDYqpHpOrdwex3F77iv+alq79iux9HZw=="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-mixin": {
       "version": "3.1.1",
@@ -14799,18 +14813,20 @@
       }
     },
     "react-navigation": {
-      "version": "1.5.11",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-1.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-2.0.1.tgz",
-      "integrity": "sha512-iKDOEOnXeQ/aetAORO0CeJTw+R4H1ds1SUeewQRv1WfzsPJhtsDbTUM2Y5k/ebqEjKmkUyOrDKceCOd4QBVrAg==",
+      "integrity": "sha512-J3AC+Lq3puxs9sEePopiKt/Hrxz8MBGDaLnq8G5Vx9s7xM0ILWtciudeT3+5hhMwxcGtpnmV86CTnaIjvCBYvQ==",
       "requires": {
         "clamp": "1.0.1",
+        "create-react-context": "0.2.2",
         "hoist-non-react-statics": "2.5.0",
         "path-to-regexp": "1.7.0",
         "prop-types": "15.6.1",
-        "react-lifecycles-compat": "1.1.4",
+        "react-lifecycles-compat": "3.0.4",
         "react-native-drawer-layout-polyfill": "1.3.2",
         "react-native-safe-area-view": "0.7.0",
-        "react-native-tab-view": "github:react-navigation/react-native-tab-view#36ebd834d78b841fc19778c966465d02fd1213bb"
+        "react-navigation-deprecated-tab-navigator": "1.2.0",
+        "react-navigation-tabs": "0.2.0"
       },
       "dependencies": {
         "hoist-non-react-statics": {
@@ -14828,6 +14844,46 @@
         }
       }
     },
+    "react-navigation-deprecated-tab-navigator": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.2.0.tgz",
+      "integrity": "sha512-fAZ5W8gyMfEAOV1b+JYq9TenIGeouwaAw1LiPhJzcKmXAV0t3kNLLDvlRXSpzJw74fv9vO6g5SMDet89p9ALNw==",
+      "requires": {
+        "react-native-tab-view": "github:react-navigation/react-native-tab-view#36ebd834d78b841fc19778c966465d02fd1213bb"
+      }
+    },
+    "react-navigation-tabs": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-0.2.0.tgz",
+      "integrity": "sha512-dM7IJYKfMdMScgAIhBin2fOH7AbNGOcwO/BH3TFGQSDouM+nngJCsnAr1Gz/DharSil/njq7QKd6yTazS96mEw==",
+      "requires": {
+        "hoist-non-react-statics": "2.5.0",
+        "prop-types": "15.6.1",
+        "react-lifecycles-compat": "1.1.4",
+        "react-native-safe-area-view": "0.7.0",
+        "react-native-tab-view": "0.0.78"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+          "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
+        },
+        "react-lifecycles-compat": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-1.1.4.tgz",
+          "integrity": "sha512-g3pdexIqkn+CVvSpYIoyON8zUbF9kgfhp672gyz7wQ7PQyXVmJtah+GDYqpHpOrdwex3F77iv+alq79iux9HZw=="
+        },
+        "react-native-tab-view": {
+          "version": "0.0.78",
+          "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.78.tgz",
+          "integrity": "sha512-DUEM7oqLR0HZHvySahX0YcGMXHnZveMVhIiYFEqWvtVI6mjsnwg9GwEidde2l10KTXi6tzIqPy3B4J+ktBD3CQ==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "react-proxy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",

package.json

@@ -67,7 +67,7 @@
     "react-native-video": "^2.0.0",
     "react-native-video-controls": "^2.2.1",
     "react-native-zeroconf": "^0.8.3",
-    "react-navigation": "^1.5.11",
+    "react-navigation": "^2.0.0",
     "react-redux": "^5.0.6",
     "realm": "^2.6.0",
     "redux": "^4.0.0",