React-native-router-flux: How to use the drawer with the navigator any example?

[bibhor]

Version

Tell us which versions you are using:

• react-native-router-flux v3.37.0
• react-native v0.32.0

I am trying to use the drawer so that there is a hamburger icon at the top of navbar. First, I dont see the hamburger in the navbar and at the same time when I goto setting page the navbar disappears and the drawer doesn't work.

import MyDrawer from './drawer';
import setting from './setting';

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="drawer" component={MyDrawer} hideNavBar={false} open={false}>
      <Scene key="setting" component={setting} title="Setting"/>
    </Scene>

Drawer class

export default class mydrawer extends Component {
    render(){
        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={<About />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                tweenHandler={(ratio) => ({
                 main: { opacity:Math.max(0.54,1-ratio) }
            })}>
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

'use strict';
import React, {Component} from 'react';
import ReactNative from 'react-native';
const styles = require('../styles/styles.js');

export default class setting extends Component {
render(){
        return (
          <View style={[styles.container, styles.more_info]}>
          </View>);
}
}

[denizs]

Did you solve this issue? If you didn't, I'll be glad to write down a quick breakdown of your mistakes 👍

[joe-re]

Hi, I encountered same problem.
It was resolved by creating nested scene and enclosed scenes by it.(Is this correct working..?)

  <Scene key="root">
    <Scene key="Drawer" component={NavigationDrawer} >
      <Scene key="Main">
        <Scene key="Scene1" component={Scene1} initial />
        <Scene key="Scene2" component={Scene2} />
        <Scene key="Scene3" component={Scene3} />
      </Scene>
    </Scene>
  </Scene>

[spidergears]

@denizs Hi Denis, I have a similar problem.
I referred the docs where it says to create the component and put some code in place where I want to render the drawer. Designing the Drawer component is okay, I am not sure where do the put the following suggested piece of code

render() {
    return (
        <Router
            // then wrap your tabs scene with Drawer:
            <Scene key="drawer" component={NavigationDrawer} open={false} >
                <Scene key="main" tabs={true} >
                ....
            </Scene>
        </Scene>
    );
}

Drawer component:

import React from 'react-native';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

export default class NavigationDrawer extends Component {
    render(){
        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={<SideMenu />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                tweenHandler={(ratio) => ({
                 main: { opacity:Math.max(0.54,1-ratio) }
            })}>
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

Will be glad if you help with the context above or with the context presented by @bibhor .

Ref https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#drawer-side-menu-integration

[denizs]

@spidergears Sorry for the late reply!
Infinite red's ignite boilerplate provides a comprehensive example of how to incorporate react native drawer into react-native-router-flux. I have included a preview of the result and a GIF displaying the functionality.

However, apparently I just discovered a bug, wich prevents the drawer from sliding/ staying open after crossing a certain threshold. I am not sure whether this is due to my current setup or actually something universal. I will investigate this topic further and post my results.

Let me know, whether my snippets worked for you.

Cheers, D

The Result

Code Snippets

// Your routes declaration
<Scene key='drawer' component={NavigationDrawer} open={false} >
  <Scene key='drawerChildrenWrapper' navigationBarStyle={Styles.navBar}> // <-- missing
       // your scenes go here
  </Scene>
</Scene>



// Your Drawer.js 
class NavigationDrawer extends Component {

  render () {
    const state = this.props.navigationState
    const children = state.children
    return (
      <Drawer
        ref='navigation'
        type='static'
        open={state.open}
        acceptPan
        onOpen={() => NavigationActions.refresh({key: state.key, open: true})}
        onClose={() => NavigationActions.refresh({key: state.key, open: false})}
        content={<DrawerContent />}
        styles={Styles}
        captureGestures
        tapToClose
        openDrawerOffset={100}
        panCloseMask={0.8}
        panThreshold={150}
        negotiatePan
        tweenHandler={Drawer.tweenPresets.parallax}
      >
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    )
  }
}

[ajaykumarramani]

const children = state.children , where is 'children' defined
i got error in this line