migration to react-navigation v2.x (#3068)

.prettierrc

@@ -3,6 +3,5 @@
   "singleQuote": true,
   "semi": true,
   "bracketSpacing": true,
-  "trailingComma": "all",
-  "eslintIntegration": true
+  "trailingComma": "all"
 }

Example/Example.js

@@ -35,12 +35,8 @@ const styles = StyleSheet.create({
   },
 });
 
-const reducerCreate = params => {
-  const defaultReducer = new Reducer(params);
-  return (state, action) => {
-    console.log('ACTION:', action);
-    return defaultReducer(state, action);
-  };
+const stateHandler = (prevState, newState, action) => {
+  console.log('ACTION:', action);
 };
 
 const getSceneStyle = () => ({
@@ -53,7 +49,7 @@ const getSceneStyle = () => ({
 const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://';
 
 const Example = () => (
-  <Router createReducer={reducerCreate} getSceneStyle={getSceneStyle} uriPrefix={prefix}>
+  <Router onStateChange={stateHandler} getSceneStyle={getSceneStyle} uriPrefix={prefix}>
     <Overlay key="overlay">
       <Modal key="modal" hideNavBar transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}>
         <Lightbox key="lightbox">

index.d.ts

@@ -7,15 +7,10 @@ import { StyleProp, Image, ViewStyle, TextStyle, ImageStyle } from "react-native
 export var Router: RouterStatic;
 export type Router = RouterStatic;
 
-// Reducer
-export var Reducer: any;
-export type Reducer = any;
-
 // Router
 interface RouterProps extends React.Props<Router> {
     sceneStyle?: StyleProp<ViewStyle>;
     backAndroidHandler?: Function;
-    createReducer?: Function;
     wrapBy?: Function;
     scenes?: any;
 }

package.json

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

src/Router.js

@@ -92,7 +92,7 @@ class App extends React.Component {
 }
 
 const Router = ({
-  sceneStyle, scenes, uriPrefix, navigator, getSceneStyle, children, onDeepLink, wrapBy, ...props
+  sceneStyle, onStateChange, scenes, uriPrefix, navigator, getSceneStyle, children, onDeepLink, wrapBy, ...props
 }) => {
   const data = { ...props };
   if (getSceneStyle) {
@@ -102,10 +102,13 @@ const Router = ({
     data.cardStyle = sceneStyle;
   }
   const AppNavigator = scenes || navigator || navigationStore.create(children, data, wrapBy);
+  if (onStateChange) {
+    navigationStore.onStateChange = onStateChange;
+  }
   return <App {...props} onDeepLink={onDeepLink} navigator={AppNavigator} uriPrefix={uriPrefix} />;
 };
 Router.propTypes = {
-  createReducer: PropTypes.func,
+  onStateChange: PropTypes.func,
   scenes: PropTypes.func,
   navigator: PropTypes.func,
   wrapBy: PropTypes.func,
@@ -116,7 +119,7 @@ Router.propTypes = {
   onDeepLink: PropTypes.func,
 };
 Router.defaultProps = {
-  createReducer: null,
+  onStateChange: null,
   scenes: null,
   navigator: null,
   wrapBy: props => props,

src/index.js

@@ -1,5 +1,4 @@
 import * as ActionConst from './ActionConst';
-import Reducer from './Reducer';
 import Router from './Router';
 import Scene from './Scene';
 import Actions from './navigationStore';
@@ -12,5 +11,5 @@ import Overlay from './Overlay';
 import pathParser from './pathParser';
 
 export {
-  ActionConst, Reducer, Router, Scene, Actions, Modal, Lightbox, Stack, Drawer, Tabs, Overlay, pathParser,
+  ActionConst, Router, Scene, Actions, Modal, Lightbox, Stack, Drawer, Tabs, Overlay, pathParser,
 };

src/navigationStore.js

@@ -325,12 +325,7 @@ function createNavigationOptions(params) {
     }
 
     if (navTransparent) {
-      res.headerStyle = {
-        backgroundColor: 'transparent',
-        zIndex: 100,
-        borderBottomWidth: 0,
-        elevation: 1,
-      };
+      res.headerTransparent = true;
     }
 
     if (backToInitial) {
@@ -471,25 +466,69 @@ function uniteParams(routeName, params) {
   return res;
 }
 
+const defaultSuccess = () => {};
+const defaultFailure = () => {};
+
 class NavigationStore {
   _navigator = null;
 
   refs = {};
 
   states = {};
 
-  get currentScene() {
-    return getActiveState(this.state);
-  }
+  currentScene;
 
-  get prevScene() {
-    return getActiveState(this.prevState);
-  }
+  prevScene;
 
-  onNavigationStateChange = (prevState, currentState, action) => {
+  currentParams;
+
+  onStateChange;
+
+  onNavigationStateChange = async (prevState, currentState, action) => {
     this.state = currentState;
     this.prevState = prevState;
-    this.currentParams = action.params;
+    const activeState = getActiveState(this.state);
+    const currentScene = activeState.routeName;
+    this.currentParams = { ...activeState.params, ...action.params };
+    this.currentScene = currentScene;
+    this.prevScene = this.prevState ? getActiveState(this.prevState).routeName : null;
+    if (this.currentScene !== this.prevScene) {
+      // run onExit for old scene
+      if (this.prevScene) {
+        const exitHandler = this[this.prevScene + OnExit];
+        if (exitHandler) {
+          try {
+            const res = exitHandler(this.state);
+            if (res instanceof Promise) {
+              res.then(defaultSuccess, defaultFailure);
+            }
+          } catch (e) {
+            console.error('Error during onExit handler:', e);
+          }
+        }
+      }
+      if (this.states[currentScene]) {
+        const handler = this[currentScene + OnEnter];
+        const success = this.states[currentScene].success || defaultSuccess;
+        const failure = this.states[currentScene].failure || defaultFailure;
+        // call onEnter handler
+        if (handler) {
+          try {
+            const res = await handler(this.currentParams, this.state);
+            if (res) {
+              success(res);
+            } else {
+              failure();
+            }
+          } catch (e) {
+            failure({ error: e.message });
+          }
+        }
+      }
+    }
+    if (this.onStateChange) {
+      this.onStateChange(prevState, currentState, action);
+    }
   };
 
   setTopLevelNavigator = (navigatorRef) => {