Merge pull request #57 from Gorhom/support-react-navigation-2.3

Support React-Navigation v2.3

boilerplate/package.json.ejs

@@ -29,7 +29,7 @@
     "react-native-i18n": "2.0.12",
     "react-native-keychain": "3.0.0-rc.3",
     "react-native-splash-screen": "3.0.6",
-    "react-navigation": "2.0.4",
+    "react-navigation": "2.3.1",
     "reactotron-mst": "2.1.0",
     "reactotron-react-native": "2.1.0",
     "validate.js": "0.12.0"
@@ -41,7 +41,7 @@
     "@types/ramda": "0.25.28",
     "@types/react": "16.0.40",
     "@types/react-native": "0.55.12",
-    "@types/react-navigation": "1.5.2",
+    "@types/react-navigation": "2.0.6",
     "@types/react-test-renderer": "16.0.1",
     "@types/validate.js": "0.11.0",
     "babel-plugin-transform-inline-environment-variables": "0.4.1",

boilerplate/src/navigation/navigation-events.ts

@@ -9,7 +9,7 @@ import { EventType, NavigationEventCallback } from "react-navigation"
  */
 export const NavigationEvents = types.model("NavigationEvents").volatile(self => {
   // who is currently subscribed to react-navigation events
-  const subs = new Set()
+  const subs = new Set<NavigationEventCallback>()
 
   /**
    * Fires after we change our state.  You call this from the dispatch
@@ -52,5 +52,5 @@ export const NavigationEvents = types.model("NavigationEvents").volatile(self =>
     }
   }
 
-  return { addListener, fireSubscribers }
+  return { addListener, fireSubscribers, subs}
 })

boilerplate/src/navigation/navigation-store.ts

@@ -30,6 +30,14 @@ export const NavigationStoreModel = NavigationEvents.named("NavigationStore")
     state: types.optional(types.frozen, DEFAULT_STATE),
   })
   .actions(self => ({
+
+    /**
+     * Return all subscribers 
+     */
+    actionSubscribers(){
+      return self.subs
+    },
+
     /**
      * Fires when navigation happens.
      *

boilerplate/src/navigation/stateful-navigator.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
 import { inject, observer } from "mobx-react"
+// @ts-ignore: until they update @type/react-navigation
+import { getNavigation, NavigationScreenProp, NavigationState } from "react-navigation"
 import { RootNavigator } from "./root-navigator"
 import { NavigationStore } from "./navigation-store"
 
@@ -10,17 +12,26 @@ interface StatefulNavigatorProps {
 @inject("navigationStore")
 @observer
 export class StatefulNavigator extends React.Component<StatefulNavigatorProps, {}> {
+  currentNavProp: NavigationScreenProp<NavigationState>
+
+  getCurrentNavigation = () => {
+    return this.currentNavProp
+  }
+
   render() {
     // grab our state & dispatch from our navigation store
-    const { state, dispatch, addListener } = this.props.navigationStore
+    const { state, dispatch, actionSubscribers } = this.props.navigationStore
 
     // create a custom navigation implementation
-    const navigation = {
-      dispatch,
+    this.currentNavProp = getNavigation(
+      RootNavigator.router,
       state,
-      addListener,
-    }
+      dispatch,
+      actionSubscribers(),
+      {},
+      this.getCurrentNavigation,
+    )
 
-    return <RootNavigator navigation={navigation} />
+    return <RootNavigator navigation={this.currentNavProp} />
   }
 }