add refresh action to change props for current route without transitions

Author: Pavlo Aksonov

Actions.js

@@ -10,6 +10,8 @@ const BEFORE_DISMISS = 'BEFORE_ROUTER_DISMISS';
 const AFTER_DISMISS = 'AFTER_ROUTER_DISMISS';
 const AFTER_FOCUS = 'AFTER_ROUTER_FOCUS';
 const BEFORE_FOCUS = 'BEFORE_ROUTER_FOCUS';
+const AFTER_REFRESH = 'AFTER_ROUTER_REFRESH';
+const BEFORE_REFRESH = 'BEFORE_ROUTER_REFRESH';
 
 function isNumeric(n){
     return !isNaN(parseFloat(n)) && isFinite(n);
@@ -104,6 +106,18 @@ class Actions {
         }
         return res;
     }
+    refresh(props: { [key: string]: any} = {}){
+        props = filterParam(props);
+        let router: BaseRouter = this.currentRouter;
+        if (router.delegate.props && router.delegate.props.dispatch){
+            router.delegate.props.dispatch({...props, type: BEFORE_REFRESH, route:router.currentRoute, name:router.currentRoute.name})
+        }
+        const res = router.refresh(props);
+        if (router.delegate.props && router.delegate.props.dispatch){
+            router.delegate.props.dispatch({...props, type: AFTER_REFRESH, route:router.currentRoute, name:router.currentRoute.name})
+        }
+        return res;
+    }
     pop(num: number = 1, props: { [key: string]: any} = {}){
         props = filterParam(props);
         if (!isNumeric(num)){

BaseRouter.js

@@ -211,6 +211,10 @@ export default class BaseRouter {
         return this.delegate.onDismiss && this.delegate.onDismiss();
     }
 
+    refresh(props:{ [key: string]: any} = {}) {
+        return this.delegate.onRefresh && this.delegate.onRefresh(props);
+    }
+
 
 }
 

ExRouter.js

@@ -161,23 +161,6 @@ export class ExRouteAdapter {
     }
 }
 
-class ExNavigationBar extends Navigator.NavigationBar {
-    constructor(props){
-        super(props);
-        this.state = {};
-    }
-    render(){
-        const route = this.props.router.nextRoute || this.props.router.currentRoute;
-        if (route.props.hideNavBar === false){
-            return super.render();
-        }
-        if (this.props.router.props.hideNavBar || route.props.hideNavBar){
-            return null;
-        }
-        return super.render();
-    }
-}
-
 export default class ExRouter extends React.Component {
     router: BaseRouter;
 
@@ -280,10 +263,29 @@ export default class ExRouter extends React.Component {
         this.setState({modal: null});
     }
 
+    onRefresh(props:{ [key: string]: any}){
+        this.setState(props);
+    }
+
     onActionSheet(route: Route, props:{ [key: string]: any}){
         this.refs.actionsheet.showActionSheetWithOptions({...route.props, ...props}, props.callback);
     }
 
+    _renderNavigationBar(props){
+        const navBar = this.props.renderNavigationBar ? this.props.renderNavigationBar(props) :
+            <Navigator.NavigationBar {...props}/>
+
+        const route = this.props.router.nextRoute || this.props.router.currentRoute;
+        if (route.props.hideNavBar === false){
+            return navBar;
+        }
+        if (this.props.router.props.hideNavBar || route.props.hideNavBar){
+            return null;
+        }
+        return navBar;
+
+    }
+
     render() {
         const router = this.props.router;
         if (!router){
@@ -301,13 +303,13 @@ export default class ExRouter extends React.Component {
                     {header}
                     <ExNavigator ref="nav" initialRouteStack={router.stack.map(route => {
                             const oldProps = router.routes[route].props
-                            router.routes[route].props = {...oldProps, ...parentProps(this.props)}
+                            router.routes[route].props = {...oldProps, ...parentProps(this.props), ...this.state}
                             return new ExRouteAdapter(router.routes[route])
                         })}
                         style={styles.transparent}
                         sceneStyle={{ paddingTop: 0, backgroundColor:'transparent' }}
-                        renderNavigationBar={props=><ExNavigationBar {...props} router={router}/>}
                         {...this.props}
+                        renderNavigationBar={props=>this._renderNavigationBar({...props, ...this.state, router})}
                     />
                     {footer}
                     {this.state.modal}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",