Add listeners to navigation (as part of react-navigation 1.0.0 breaking changes)

Example/package.json

@@ -12,19 +12,19 @@
     "mobx": "^3.2.1",
     "mobx-react": "^4.2.1",
     "prop-types": "^15.5.10",
-    "react": "16.3.0-alpha.1",
-    "react-native": "0.54.2",
+    "react": "16.3.2",
+    "react-native": "0.55.4",
     "react-native-button": "^2.0.0",
     "react-native-message-bar": "^1.6.0",
     "react-native-router-flux": "4.0.0-beta.30",
     "react-navigation": "1.5.8"
   },
   "devDependencies": {
-    "babel-jest": "20.0.3",
-    "babel-preset-react-native": "2.0.0",
+    "babel-jest": "20.1.0-echo.1",
+    "babel-preset-react-native": "2.1.0",
     "babel-preset-react-native-stage-0": "^1.0.1",
-    "jest": "20.0.4",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "jest": "20.1.0-echo.1",
+    "react-test-renderer": "16.3.2"
   },
   "jest": {
     "preset": "react-native",

dist/LightboxNavigator.js

@@ -2,7 +2,8 @@ Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/L
 
 var _react=require('react');var _react2=_interopRequireDefault(_react);
 var _reactNavigation=require('react-navigation');
-var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
+var _reactNative=require('react-native');
+var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
 
 var LightboxNavigator=function LightboxNavigator(
 routeConfigs)
@@ -30,9 +31,9 @@ initialIndex=i;
 }
 var Popup=index!==initialIndex?routeConfigs[routes[index].routeName].screen:null;
 
-return _react2.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:33}},
-_react2.default.createElement(Component,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:routes[initialIndex]}),__source:{fileName:_jsxFileName,lineNumber:34}}),
-Popup&&_react2.default.createElement(Popup,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:routes[index]}),__source:{fileName:_jsxFileName,lineNumber:35}}));
+return _react2.default.createElement(_reactNative.View,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:34}},
+_react2.default.createElement(Component,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:routes[initialIndex],addListener:_navigationStore2.default.addListener}),__source:{fileName:_jsxFileName,lineNumber:35}}),
+Popup&&_react2.default.createElement(Popup,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:routes[index],addListener:_navigationStore2.default.addListener}),__source:{fileName:_jsxFileName,lineNumber:36}}));
 
 });
 

dist/OverlayNavigator.js

@@ -2,7 +2,8 @@ Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/O
 
 var _react=require('react');var _react2=_interopRequireDefault(_react);
 var _reactNavigation=require('react-navigation');
-var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
+var _reactNative=require('react-native');
+var _navigationStore=require('./navigationStore');var _navigationStore2=_interopRequireDefault(_navigationStore);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
 
 var OverlayNavigator=function OverlayNavigator(
 routeConfigs)
@@ -36,12 +37,12 @@ for(var _i=0;_i<tabsConfig.order.length;_i++){
 var routeName=tabsConfig.order[_i];
 if(initialRouteName!==routeName){
 var Overlay=routeConfigs[routeName].screen;
-overlays.push(_react2.default.createElement(Overlay,{key:routeName,navigation:{dispatch:dispatch,state:routesMap[routeName]},__source:{fileName:_jsxFileName,lineNumber:39}}));
+overlays.push(_react2.default.createElement(Overlay,{key:routeName,navigation:{dispatch:dispatch,state:routesMap[routeName],addListener:_navigationStore2.default.addListener},__source:{fileName:_jsxFileName,lineNumber:40}}));
 }
 }
 var ContentComponent=tabsConfig.contentComponent||_reactNative.View;
-return _react2.default.createElement(ContentComponent,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:43}},
-_react2.default.createElement(Component,{navigation:{dispatch:dispatch,state:routes[initialIndex]},__source:{fileName:_jsxFileName,lineNumber:44}}),
+return _react2.default.createElement(ContentComponent,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:44}},
+_react2.default.createElement(Component,{navigation:{dispatch:dispatch,state:routes[initialIndex],addListener:_navigationStore2.default.addListener},__source:{fileName:_jsxFileName,lineNumber:45}}),
 overlays);
 
 });

dist/Router.js

@@ -69,7 +69,7 @@ _navigationStore2.default[actionKey](params);
 {
 var AppNavigator=this.props.navigator;
 return(
-_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state}),__source:{fileName:_jsxFileName,lineNumber:72}}));
+_react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:_navigationStore2.default.dispatch,state:_navigationStore2.default.state,addListener:_navigationStore2.default.addListener}),__source:{fileName:_jsxFileName,lineNumber:72}}));
 
 }}]);return App;}(_react2.default.Component),_class2.propTypes={navigator:_propTypes2.default.func,backAndroidHandler:_propTypes2.default.func,uriPrefix:_propTypes2.default.string,onDeepLink:_propTypes2.default.func},_temp2))||_class;
 
@@ -88,7 +88,7 @@ if(dispatch&&state){
 
 _navigationStore2.default.setState(state);
 _navigationStore2.default.dispatch=dispatch;
-return _react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:state}),uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:91}});
+return _react2.default.createElement(AppNavigator,{navigation:(0,_reactNavigation.addNavigationHelpers)({dispatch:dispatch,state:state,addListener:_navigationStore2.default.addListener}),uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:91}});
 }
 return _react2.default.createElement(App,_extends({},props,{onDeepLink:onDeepLink,navigator:AppNavigator,uriPrefix:uriPrefix,__source:{fileName:_jsxFileName,lineNumber:93}}));
 };

dist/navigationStore.js

@@ -1069,4 +1069,7 @@ params:params})]}));
 
 
 
+};}_createClass(NavigationStore,[{key:'state',get:function get(){var scene=this.currentScene;var params=this.currentParams;return this._state;}}]);return NavigationStore;}(),(_descriptor=_applyDecoratedDescriptor(_class2.prototype,'currentScene',[_mobx.observable],{enumerable:true,initializer:function initializer(){return'';}}),_descriptor2=_applyDecoratedDescriptor(_class2.prototype,'prevScene',[_mobx.observable],{enumerable:true,initializer:function initializer(){return'';}}),_descriptor3=_applyDecoratedDescriptor(_class2.prototype,'currentParams',[_mobx.observable],{enumerable:true,initializer:null}),_descriptor4=_applyDecoratedDescriptor(_class2.prototype,'setState',[_mobx.action],{enumerable:true,initializer:function initializer(){var _this3=this;return function _callee(newState){var state,currentScene,exitHandler,res,handler,_success,_failure,params,_res;return regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:if(newState){_context.next=2;break;}return _context.abrupt('return');case 2:state=(0,_State.getActiveState)(newState);if(!((0,_lodash2.default)(state.params,_this3._currentParams)&&state.routeName===_this3.currentScene)){_context.next=5;break;}return _context.abrupt('return');case 5:currentScene=_this3.currentScene;_this3._state=newState;_this3.currentScene=state.routeName;_this3.prevScene=currentScene;_this3.currentParams=state.params;_this3._currentParams=state.params;if(!(currentScene!==_this3.currentScene&&_this3.currentScene!=='DrawerOpen'&&_this3.currentScene!=='DrawerClose')){_context.next=32;break;}_this3.dispatch({type:ActionConst.BLUR,routeName:currentScene});exitHandler=_this3[currentScene+_Util.OnExit];if(exitHandler){try{res=exitHandler();if(res instanceof Promise){res.then(defaultSuccess,defaultFailure);}}catch(e){console.error('Error during onExit handler:',e);}}_this3.dispatch({type:ActionConst.FOCUS,routeName:_this3.currentScene,params:_this3._currentParams});if(!_this3.states[_this3.currentScene]){_context.next=32;break;}handler=_this3[_this3.currentScene+_Util.OnEnter];_success=_this3.states[_this3.currentScene].success||defaultSuccess;_failure=_this3.states[_this3.currentScene].failure||defaultFailure;if(!handler){_context.next=32;break;}_context.prev=21;params=(0,_State.getActiveState)(_this3._state).params;_context.next=25;return regeneratorRuntime.awrap(handler(params));case 25:_res=_context.sent;if(_res){_success(_res);}else{_failure();}_context.next=32;break;case 29:_context.prev=29;_context.t0=_context['catch'](21);_failure({error:_context.t0.message});case 32:case'end':return _context.stop();}}},null,_this3,[[21,29]]);};}})),_class2);exports.default=
+
+
 new NavigationStore();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "4.0.0-beta.30",
+  "version": "4.0.0-beta.31",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",

src/LightboxNavigator.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { addNavigationHelpers, createNavigationContainer, createNavigator, TabRouter } from 'react-navigation';
 import { View } from 'react-native';
+import navigationStore from './navigationStore';
 
 const LightboxNavigator = (
   routeConfigs,
@@ -31,8 +32,8 @@ const LightboxNavigator = (
     const Popup = index !== initialIndex ? routeConfigs[routes[index].routeName].screen : null;
 
     return (<View style={{ flex: 1 }}>
-      <Component navigation={addNavigationHelpers({ dispatch, state: routes[initialIndex] })} />
-      {Popup && <Popup navigation={addNavigationHelpers({ dispatch, state: routes[index] })} />}
+      <Component navigation={addNavigationHelpers({ dispatch, state: routes[initialIndex], addListener: navigationStore.addListener })} />
+      {Popup && <Popup navigation={addNavigationHelpers({ dispatch, state: routes[index], addListener: navigationStore.addListener })} />}
     </View>);
   });
 

src/OverlayNavigator.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { createNavigationContainer, createNavigator, TabRouter } from 'react-navigation';
 import { View } from 'react-native';
+import navigationStore from './navigationStore';
 
 const OverlayNavigator = (
   routeConfigs,
@@ -36,12 +37,12 @@ const OverlayNavigator = (
       const routeName = tabsConfig.order[i];
       if (initialRouteName !== routeName) {
         const Overlay = routeConfigs[routeName].screen;
-        overlays.push(<Overlay key={routeName} navigation={{ dispatch, state: routesMap[routeName] }} />);
+        overlays.push(<Overlay key={routeName} navigation={{ dispatch, state: routesMap[routeName], addListener: navigationStore.addListener }} />);
       }
     }
     const ContentComponent = tabsConfig.contentComponent || View;
     return (<ContentComponent style={{ flex: 1 }}>
-      <Component navigation={{ dispatch, state: routes[initialIndex] }} />
+      <Component navigation={{ dispatch, state: routes[initialIndex], addListener: navigationStore.addListener }} />
       {overlays}
     </ContentComponent>);
   });

src/Router.js

@@ -69,7 +69,7 @@ class App extends React.Component {
   render() {
     const AppNavigator = this.props.navigator;
     return (
-      <AppNavigator navigation={addNavigationHelpers({ dispatch: navigationStore.dispatch, state: navigationStore.state })} />
+      <AppNavigator navigation={addNavigationHelpers({ dispatch: navigationStore.dispatch, state: navigationStore.state, addListener: navigationStore.addListener })} />
     );
   }
 }
@@ -88,7 +88,7 @@ const Router = ({ createReducer, sceneStyle, scenes, uriPrefix, navigator, getSc
     // set external state and dispatch
     navigationStore.setState(state);
     navigationStore.dispatch = dispatch;
-    return <AppNavigator navigation={addNavigationHelpers({ dispatch, state })} uriPrefix={uriPrefix} />;
+    return <AppNavigator navigation={addNavigationHelpers({ dispatch, state, addListener: navigationStore.addListener })} uriPrefix={uriPrefix} />;
   }
   return <App {...props} onDeepLink={onDeepLink} navigator={AppNavigator} uriPrefix={uriPrefix} />;
 };