Merge pull request #406 from Froelund/master

Added DrawerExample

Author: aksonov

Example/Example.js

@@ -8,6 +8,7 @@ import Error from './components/Error'
 import Home from './components/Home'
 import TabView from './components/TabView'
 import EchoView from './components/EchoView'
+import NavigationDrawer from './components/NavigationDrawer'
 
 class TabIcon extends React.Component {
     render(){
@@ -47,7 +48,8 @@ export default class Example extends React.Component {
     render() {
         return <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7'}}>
             <Scene key="modal" component={Modal} >
-                <Scene key="root" hideNavBar={true}>
+                <Scene key="drawer" component={NavigationDrawer}>
+                  <Scene key="root">
                     <Scene key="echo" clone component={EchoView} />
                     <Scene key="register" component={Register} title="Register"/>
                     <Scene key="register2" component={Register} title="Register2" duration={1}/>
@@ -70,6 +72,7 @@ export default class Example extends React.Component {
                         <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
                         <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} renderRightButton={()=><Right/>}/>
                     </Scene>
+                  </Scene>
                 </Scene>
                 <Scene key="error" component={Error}/>
             </Scene>

Example/components/NavigationDrawer.js

@@ -0,0 +1,30 @@
+import React,{
+  Component
+} from 'react-native'
+import Launch from './Launch'
+import Drawer from 'react-native-drawer'
+import {DefaultRenderer} from 'react-native-router-flux';
+
+export default class Navigation extends Component {
+  render(){
+    console.log(this.context);
+    const navigationState = this.props.navigationState;
+    let selected = navigationState.children[navigationState.index];
+    // var activeScene = (selected.name == "root" : selected[0] ? selected);
+    return (
+        <Drawer
+            ref="navigation"
+            type="displace"
+            content={<Launch />}
+            tapToClose={true}
+            openDrawerOffset={0.2}
+            panCloseMask={0.2}
+            negotiatePan={true}
+            tweenHandler={(ratio) => ({
+                 main: { opacity:Math.max(0.54,1-ratio) }
+            })}>
+              <DefaultRenderer navigationState={selected}  key={selected.key} {...selected} />
+        </Drawer>
+    );
+  }
+}

Example/package.json

@@ -10,6 +10,7 @@
     "react-native-button": "^1.2.1",
     "react": "^0.14.7",
     "react-native-router-flux": "file:../",
-    "react-native-modalbox": "^1.3.0"
+    "react-native-modalbox": "^1.3.0",
+    "react-native-drawer": "^1.16.7"
   }
 }

README.md

@@ -68,7 +68,7 @@ class App extends React.Component {
     * Actions.ACTION_NAME(PARAMS) will call appropriate action and params will be passed to the scene.
     * Actions.pop() will pop the current screen.
     * Actions.refresh(PARAMS) will update the properties of current screen.
-    
+
 ## Available imports
 - Router
 - Scene
@@ -86,7 +86,7 @@ class App extends React.Component {
 | Property | Type | Default | Description |
 |---------------|----------|--------------|----------------------------------------------------------------|
 | reducer | function | | optional user-defined reducer for scenes, you may want to use it to intercept all actions and put your custom logic |
-| createReducer | function | | function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below| 
+| createReducer | function | | function that returns a reducer function for {initialState, scenes} param, you may wrap Reducer(param) with your custom reducer, check Flux usage section below|
 | other props | | | all properties that will be passed to all your scenes |  
 | children | | required (if no scenes property passed)| Scene root element |
 | scenes | object | optional | scenes for Router created with Actions.create. This will allow to create all actions BEFORE React processing. If you don't need it you may pass Scene root element as children |
@@ -100,7 +100,7 @@ class App extends React.Component {
 | tabs| bool | false | Defines 'TabBar' scene container, so child scenes will be displayed as 'tabs'. If no `component` is defined, built-in `TabBar` is used as renderer. All child scenes are wrapped into own navbar.
 | initial | bool | false | Set to `true` if this is the initial scene |
 | duration | number | 250 | Duration of transition (in ms) |
-| direction | string | 'horizontal' | direction of animation horizontal/vertical | 
+| direction | string | 'horizontal' | direction of animation horizontal/vertical |
 | title | string | null | The title to be displayed in the navigation bar |
 | navBar | React.Component | | optional custom NavBar for the scene. Check built-in NavBar of the component for reference |
 | hideNavBar | bool | false | hides navigation bar for this scene |
@@ -227,7 +227,7 @@ To display a modal use `Modal` as root renderer, so it will render first element
 This component doesn't depend from any redux/flux library. It uses new React Native Navigation API and provide own reducer for its navigation state.
 You may provide own one if you need. To avoid creation of initial state, you may pass reducer creator. Example to print all actions:
 ```javascript
-// remember to add the 'Reducer' to your imports along with Router, Scene, ... like so 
+// remember to add the 'Reducer' to your imports along with Router, Scene, ... like so
 // import { Reducer } from 'react-native-router-flux'
 const reducerCreate = params=>{
     const defaultReducer = Reducer(params);
@@ -258,7 +258,7 @@ Following example chooses scene depending from sessionID using Redux:
 ```
 
 ## Drawer (side menu) integration
-Example of Drawer custom renderer based on react-native-drawer. Note that you have to include drawer to static contextTypes of your NavBar to enable show/hide/toggle side menu:
+Example of Drawer custom renderer based on react-native-drawer. Note that the build-in NavBar component supports toggling of drawer. The Drawer implementation just needs to have a function: toggle();
 
 ```javascript
 import React from 'react-native';
@@ -268,7 +268,8 @@ import {DefaultRenderer} from 'react-native-router-flux';
 
 export default class extends React.Component {
     render(){
-        const children = this.props.navigationState.children;
+        const navigationState = this.props.navigationState;
+        let selected = navigationState.children[navigationState.index];
         return (
             //Material Design Style Drawer
             <Drawer
@@ -282,7 +283,7 @@ export default class extends React.Component {
                 tweenHandler={(ratio) => ({
                      main: { opacity:Math.max(0.54,1-ratio) }
                 })}>
-                <DefaultRenderer navigationState={children[0]} />
+                <DefaultRenderer navigationState={selected}  key={selected.key} {...selected} />
             </Drawer>
 
         );

src/NavBar.js

@@ -32,7 +32,7 @@ const {
     Header: NavigationHeader,
     } = NavigationExperimental;
 
-export default class extends React.Component {
+export default class NavBar extends React.Component {
     componentWillMount(){
         const state = this.props.navigationState;
         this._renderRightButton = this._renderRightButton.bind(this);
@@ -78,7 +78,18 @@ export default class extends React.Component {
 
     _renderBackButton() {
         if (this.props.navigationState.index === 0) {
+          if(!!this.context.drawer && typeof this.context.drawer.toggle === 'function'){
+            return (
+              <TouchableOpacity style={[styles.backButton, this.props.navigationState.leftButtonStyle]} onPress={() => {
+                var drawer = this.context.drawer;
+                drawer.toggle();
+              }}>
+                  <Image source={require('./menu_burger.png')} style={[styles.backButtonImage, this.props.navigationState.barButtonIconStyle]}/>
+              </TouchableOpacity>
+            );
+          }else{
             return null;
+          }
         }
         return (
             <TouchableOpacity style={[styles.backButton, this.props.navigationState.leftButtonStyle]} onPress={Actions.pop}>
@@ -153,6 +164,11 @@ export default class extends React.Component {
 
 }
 
+
+NavBar.contextTypes = {
+  drawer: React.PropTypes.object
+}
+
 const styles = StyleSheet.create({
     title: {
         textAlign: 'center',