fix #713, #789

Example/components/NavigationDrawer.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import Drawer from 'react-native-drawer';
-import { DefaultRenderer } from 'react-native-router-flux';
+import { DefaultRenderer, Actions } from 'react-native-router-flux';
 
 import TabView from './TabView';
 
@@ -10,11 +10,14 @@ const propTypes = {
 
 class NavigationDrawer extends React.Component {
   render() {
-    const children = this.props.navigationState.children;
+    const state = this.props.navigationState;
+    const children = state.children;
     return (
       <Drawer
         ref="navigation"
         type="displace"
+        onOpen={() => Actions.refresh({ key: state.key, open: true })}
+        onClose={() => Actions.refresh({ key: state.key, open: false })}
         content={<TabView />}
         tapToClose
         openDrawerOffset={0.2}

docs/CHANGELOG.md

@@ -1,8 +1,10 @@
 # Change log
+- 3.26.20 Support for 'modifier' functions inside Refresh actions, like `Actions.refresh({ key: 'drawer', open: value=>!value })`
+- 3.26.0 Support for React Native 0.26
 - 3.22.20 fix more ESLint errors, fix passing leftButtonStyle property for back button
 - 3.22.18 fix some ESLint errors and ignore pop for root scene
 - 3.22.17 allow jump & push together - now you could call Actions.tab2_2() (`tab2_2` is next scene after `tab2`) even if `tab2` is not active
 - 3.22.16 simplified syntax for sub-states
 - 3.22.15 introduces support for different states inside the same screen.
 - 3.22.10 simplifies customization of own NavBar. From now you could import built-in NavBar from the component and customize it. You could set it globally to all scenes by setting `navBar` property for `Router` component.
-For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons.
+For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons.

docs/OTHER_INFO.md

@@ -58,14 +58,18 @@ Example of Drawer custom renderer based on react-native-drawer. Note that the bu
 import React from 'react-native';
 import Drawer from 'react-native-drawer';
 import SideMenu from './SideMenu';
-import {DefaultRenderer} from 'react-native-router-flux';
+import {Actions, DefaultRenderer} from 'react-native-router-flux';
 
 export default class extends Component {
     render(){
-        const children = this.props.navigationState.children;
+        const state = this.props.navigationState;
+        const children = state.children;
         return (
             <Drawer
                 ref="navigation"
+                open={state.open}
+                onOpen={()=>Actions.refresh({key:state.key, open: true})
+                onClose={()=>Actions.refresh({key:state.key, open: false})
                 type="displace"
                 content={<TabView />}
                 tapToClose={true}
@@ -82,12 +86,14 @@ export default class extends Component {
 }
 
 /// then wrap your tabs scene with Drawer:
-            <Scene key="drawer" component={Drawer}>
+            <Scene key="drawer" component={Drawer} open={false} >
                 <Scene key="main" tabs={true} >
                         ....
                 </Scene>
             </Scene>
 
+// then you could open/hide/toggle drawer anywhere using 'refresh' modifiers:
+          Actions.refresh({key: drawer, open: value => !value };
 ```
 ## Sub-scenes support
 You could create 'sub-scene' actions by putting them as children for needed 'base' scene without `component` prop and call such action anywhere - 'base' Scene will be updated accordingly.

package.json

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

src/NavBar.js

@@ -110,6 +110,10 @@ const styles = StyleSheet.create({
   rightButtonIconStyle: {
 
   },
+  defaultImageStyle: {
+    height: 24,
+    resizeMode: 'contain',
+  },
 });
 
 const propTypes = {
@@ -284,7 +288,7 @@ class NavBar extends React.Component {
         );
       }
 
-      if (!!drawer && typeof drawer.toggle === 'function') {
+      if (!onPress && !!drawer && typeof drawer.toggle === 'function') {
         buttonImage = state.drawerImage;
         if (buttonImage) {
           onPress = drawer.toggle;
@@ -316,7 +320,7 @@ class NavBar extends React.Component {
               >
                 <Image
                   source={buttonImage}
-                  style={state.leftButtonIconStyle}
+                  style={state.leftButtonIconStyle || styles.defaultImageStyle}
                 />
               </View>}
           </TouchableOpacity>
@@ -394,7 +398,7 @@ class NavBar extends React.Component {
         ]}
       >
         {renderTitle ? renderTitle(selected) : state.children.map(this.renderTitle, this)}
-        {renderBackButton(selected) || renderLeftButton(selected)}
+        {renderLeftButton(selected) || renderBackButton(selected) }
         {renderRightButton(selected)}
       </Animated.View>
     );

src/Reducer.js

@@ -181,7 +181,16 @@ function reducer({ initialState, scenes }) {
           sceneKey = state.scenes[child.base].sceneKey;
         }
         assert(child, `missed child data for key=${key}`);
-        action = { ...child, ...action, sceneKey, key };
+        // evaluate functions within actions to allow conditional set, like switch values
+        const evaluated = {};
+        Object.keys(action).forEach(el => {
+          if (typeof action[el] === 'function' && typeof child[el] !== 'undefined'
+            && typeof child[el] !== typeof action[el]) {
+            evaluated[el] = action[el](child[el], child);
+          }
+        });
+        action = { ...child, ...action, ...evaluated, sceneKey, key };
+
         // console.log("REFRESH ACTION:", action);
       } else {
         const scene = state.scenes[action.key];