update react-navigation

package.json

@@ -46,7 +46,7 @@
     "react": "^16.0.0-beta.5",
     "react-native": "^0.49.3",
     "react-native-vector-icons": "^4.4.2",
-    "react-navigation": "1.0.0-beta.11",
+    "react-navigation": "^2.5.5",
     "react-redux": "^5.0.6",
     "redux": "^3.4.0",
     "redux-logger": "^2.6.1",

src/modules/AppView.android.js

@@ -1,13 +1,15 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {View, StyleSheet, StatusBar, ActivityIndicator, BackHandler} from 'react-native';
-import NavigatorViewContainer from './navigator/NavigatorViewContainer';
+import { View, StyleSheet, StatusBar, ActivityIndicator, BackHandler } from 'react-native';
+// import NavigatorViewContainer from './navigator/NavigatorViewContainer';
 import * as snapshotUtil from '../utils/snapshot';
 import * as SessionStateActions from '../modules/session/SessionState';
 import store from '../redux/store';
 import DeveloperMenu from '../components/DeveloperMenu';
 
-import {NavigationActions} from 'react-navigation';
+// import { NavigationActions } from 'react-navigation';
+import AppNavigator from '../modules/navigator/Navigator'
+import NavigationService from './navigator/NavigationService'
 
 class AppView extends Component {
   static displayName = 'AppView';
@@ -24,7 +26,10 @@ class AppView extends Component {
     const currentTab = navigatorState.getIn(['routes', 0, 'index']);
 
     if (currentTab !== 0 || currentStackScreen !== 0) {
-      store.dispatch(NavigationActions.back());
+      store.dispatch(
+        this.props.navigation.goBack()
+        // NavigationActions.back()
+      );
       return true;
     }
 
@@ -39,7 +44,7 @@ class AppView extends Component {
   componentDidMount() {
     snapshotUtil.resetSnapshot()
       .then(snapshot => {
-        const {dispatch} = this.props;
+        const { dispatch } = this.props;
 
         if (snapshot) {
           dispatch(SessionStateActions.resetSessionStateFromSnapshot(snapshot));
@@ -56,16 +61,19 @@ class AppView extends Component {
   render() {
     if (!this.props.isReady) {
       return (
-        <View style={{flex: 1}}>
+        <View style={{ flex: 1 }}>
           <ActivityIndicator style={styles.centered} />
         </View>
       );
     }
 
     return (
-      <View style={{flex: 1}}>
+      <View style={{ flex: 1 }}>
         <StatusBar backgroundColor='#455a64' barStyle='light-content' />
-        <NavigatorViewContainer />
+        {/* <NavigatorViewContainer /> */}
+        <AppNavigator ref={navigatorRef => {
+            NavigationService.setTopLevelNavigator(navigatorRef);
+          }} />
         {__DEV__ && <DeveloperMenu />}
       </View>
     );

src/modules/AppView.ios.js

@@ -1,11 +1,13 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {View, StyleSheet, StatusBar, ActivityIndicator} from 'react-native';
-import NavigatorViewContainer from './navigator/NavigatorViewContainer';
+import { View, StyleSheet, StatusBar, ActivityIndicator } from 'react-native';
+// import NavigatorViewContainer from './navigator/NavigatorViewContainer';
 import * as snapshotUtil from '../utils/snapshot';
 import * as SessionStateActions from '../modules/session/SessionState';
 import store from '../redux/store';
 import DeveloperMenu from '../components/DeveloperMenu';
+import AppNavigator from '../modules/navigator/Navigator'
+import NavigationService from './navigator/NavigationService'
 
 class AppView extends Component {
   static displayName = 'AppView';
@@ -18,7 +20,7 @@ class AppView extends Component {
   componentDidMount() {
     snapshotUtil.resetSnapshot()
       .then(snapshot => {
-        const {dispatch} = this.props;
+        const { dispatch } = this.props;
 
         if (snapshot) {
           dispatch(SessionStateActions.resetSessionStateFromSnapshot(snapshot));
@@ -35,16 +37,19 @@ class AppView extends Component {
   render() {
     if (!this.props.isReady) {
       return (
-        <View style={{flex: 1}}>
+        <View style={{ flex: 1 }}>
           <ActivityIndicator style={styles.centered} />
         </View>
       );
     }
 
     return (
-      <View style={{flex: 1}}>
+      <View style={{ flex: 1 }}>
         <StatusBar backgroundColor='#455a64' barStyle='light-content' />
-        <NavigatorViewContainer />
+        {/* <NavigatorViewContainer /> */}
+        <AppNavigator ref={navigatorRef => {
+            NavigationService.setTopLevelNavigator(navigatorRef);
+          }} />
         {__DEV__ && <DeveloperMenu />}
       </View>
     );

src/modules/colors/ColorView.js

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import NavigationService from '../navigator/NavigationService'
 
 const color = () => Math.floor(255 * Math.random());
 
@@ -29,9 +30,9 @@ class ColorView extends Component {
     }
   }
 
-  static propTypes = {
-    navigate: PropTypes.func.isRequired
-  };
+  // static propTypes = {
+  //   navigate: PropTypes.func.isRequired
+  // };
 
   constructor(props) {
     super(props);
@@ -41,7 +42,8 @@ class ColorView extends Component {
   }
 
   open = () => {
-    this.props.navigate({routeName: 'InfiniteColorStack'});
+    // this.props.navigate({routeName: 'InfiniteColorStack'});
+    NavigationService.navigate('InfiniteColorStack')
   };
 
   render() {

src/modules/colors/ColorViewContainer.js

@@ -1,13 +1,13 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {NavigationActions} from 'react-navigation';
+// import {NavigationActions} from 'react-navigation';
 import ColorView from './ColorView';
 
 export default connect(
    null,
    dispatch => {
      return {
-       navigate: bindActionCreators(NavigationActions.navigate, dispatch)
+      //  navigate: bindActionCreators(NavigationActions.navigate, dispatch)
      };
    }
 )(ColorView);

src/modules/counter/CounterView.js

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import NavigationService from '../navigator/NavigationService'
 
 class CounterView extends Component {
   static displayName = 'CounterView';
@@ -30,7 +31,7 @@ class CounterView extends Component {
       reset: PropTypes.func.isRequired,
       random: PropTypes.func.isRequired
     }).isRequired,
-    navigate: PropTypes.func.isRequired
+    // navigate: PropTypes.func.isRequired
   };
 
   increment = () => {
@@ -46,7 +47,8 @@ class CounterView extends Component {
   };
 
   bored = () => {
-    this.props.navigate({routeName: 'Color'});
+    // this.props.navigate({routeName: 'Color'});
+    NavigationService.navigate('Color')
   };
 
   renderUserInfo = () => {

src/modules/counter/CounterViewContainer.js

@@ -1,7 +1,7 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import CounterView from './CounterView';
-import {NavigationActions} from 'react-navigation';
+// import {NavigationActions} from 'react-navigation';
 import * as CounterStateActions from '../counter/CounterState';
 
 export default connect(
@@ -11,7 +11,7 @@ export default connect(
   }),
   dispatch => {
     return {
-      navigate: bindActionCreators(NavigationActions.navigate, dispatch),
+      // navigate: bindActionCreators(NavigationActions.navigate, dispatch),
       counterStateActions: bindActionCreators(CounterStateActions, dispatch)
     };
   }

src/modules/navigator/NavigationService.js

@@ -0,0 +1,23 @@
+import { NavigationActions } from 'react-navigation';
+
+let _navigator;
+
+function setTopLevelNavigator(navigatorRef) {
+  _navigator = navigatorRef;
+}
+
+function navigate(routeName, params) {
+  _navigator.dispatch(
+    NavigationActions.navigate({
+      routeName,
+      params,
+    })
+  );
+}
+
+// add other navigation functions that you need and export them
+const NavigationService = {
+  navigate,
+  setTopLevelNavigator,
+}
+export default NavigationService

src/modules/navigator/Navigator.js

@@ -1,5 +1,5 @@
-import {Platform} from 'react-native';
-import {TabNavigator, StackNavigator} from 'react-navigation';
+import { Platform } from 'react-native';
+import { createTabNavigator, createStackNavigator } from 'react-navigation';
 
 import CounterViewContainer from '../counter/CounterViewContainer';
 import ColorViewContainer from '../colors/ColorViewContainer';
@@ -8,34 +8,34 @@ const headerColor = '#39babd';
 const activeColor = 'white';
 
 // TabNavigator is nested inside StackNavigator
-export const MainScreenNavigator = TabNavigator({
-  Counter: {screen: CounterViewContainer},
-  Color: {screen: ColorViewContainer}
+export const MainScreenNavigator = createTabNavigator({
+  Counter: { screen: CounterViewContainer },
+  Color: { screen: ColorViewContainer }
 }, {
-  tabBarOptions: {
-    ...Platform.select({
-      android: {
-        activeTintColor: activeColor,
-        indicatorStyle: {backgroundColor: activeColor},
-        style: {backgroundColor: headerColor}
-      }
-    })
-  }
-});
+    tabBarOptions: {
+      ...Platform.select({
+        android: {
+          activeTintColor: activeColor,
+          indicatorStyle: { backgroundColor: activeColor },
+          style: { backgroundColor: headerColor }
+        }
+      })
+    }
+  });
 
 MainScreenNavigator.navigationOptions = {
   title: 'Pepperoni App Template',
-  headerTitleStyle: {color: 'white'},
+  headerTitleStyle: { color: 'white' },
   headerStyle: {
     backgroundColor: headerColor,
     elevation: 0 // disable header elevation when TabNavigator visible
   }
 };
 
 // Root navigator is a StackNavigator
-const AppNavigator = StackNavigator({
-  Home: {screen: MainScreenNavigator},
-  InfiniteColorStack: {screen: ColorViewContainer}
+const AppNavigator = createStackNavigator({
+  Home: { screen: MainScreenNavigator },
+  InfiniteColorStack: { screen: ColorViewContainer }
 });
 
 export default AppNavigator;

src/modules/navigator/NavigatorState.js

@@ -1,19 +1,19 @@
-import {fromJS} from 'immutable';
-import {NavigationActions} from 'react-navigation';
-import includes from 'lodash/includes';
+// import {fromJS} from 'immutable';
+// import {NavigationActions} from 'react-navigation';
+// import includes from 'lodash/includes';
 
-import AppNavigator from './Navigator';
+// import AppNavigator from './Navigator';
 
-export default function NavigatorReducer(state, action) {
-  // Initial state
-  if (!state) {
-    return fromJS(AppNavigator.router.getStateForAction(action, state));
-  }
+// export default function NavigatorReducer(state, action) {
+//   // Initial state
+//   if (!state) {
+//     return fromJS(AppNavigator.router.getStateForAction(action, state));
+//   }
 
-  // Is this a navigation action that we should act upon?
-  if (includes(NavigationActions, action.type)) {
-    return fromJS(AppNavigator.router.getStateForAction(action, state.toJS()));
-  }
+//   // Is this a navigation action that we should act upon?
+//   if (includes(NavigationActions, action.type)) {
+//     return fromJS(AppNavigator.router.getStateForAction(action, state.toJS()));
+//   }
 
-  return state;
-}
+//   return state;
+// }

src/modules/navigator/NavigatorView.js

@@ -1,35 +1,35 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {addNavigationHelpers} from 'react-navigation';
+// import React, {Component} from 'react';
+// import PropTypes from 'prop-types';
+// import {addNavigationHelpers} from 'react-navigation';
 
-import AppNavigator from './Navigator';
+// import AppNavigator from './Navigator';
 
-class NavigatorView extends Component {
-  static displayName = 'NavigationView';
+// class NavigatorView extends Component {
+//   static displayName = 'NavigationView';
 
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    navigatorState: PropTypes.shape({
-      index: PropTypes.number.isRequired,
-      routes: PropTypes.arrayOf(PropTypes.shape({
-        key: PropTypes.string.isRequired,
-        routeName: PropTypes.string.isRequired
-      }))
-    }).isRequired
-  };
+//   static propTypes = {
+//     dispatch: PropTypes.func.isRequired,
+//     navigatorState: PropTypes.shape({
+//       index: PropTypes.number.isRequired,
+//       routes: PropTypes.arrayOf(PropTypes.shape({
+//         key: PropTypes.string.isRequired,
+//         routeName: PropTypes.string.isRequired
+//       }))
+//     }).isRequired
+//   };
 
-  render() {
-    return (
-      <AppNavigator
-        navigation={
-          addNavigationHelpers({
-            dispatch: this.props.dispatch,
-            state: this.props.navigatorState
-          })
-        }
-      />
-    );
-  }
-}
+//   render() {
+//     return (
+//       <AppNavigator
+//         navigation={
+//           addNavigationHelpers({
+//             dispatch: this.props.dispatch,
+//             state: this.props.navigatorState
+//           })
+//         }
+//       />
+//     );
+//   }
+// }
 
-export default NavigatorView;
+// export default NavigatorView;