How to combine react-native-router-flux with react-native-drawer

Question

I tried to somehow connect those to examples:

react-native-drawer with react-native-router-flux: following this documentation: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

How do I have to put the Custom Drawer in a file?

I always get errors, when trying to have it like this:

File: components/Drawer.js

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

export default class 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>
        );
    }
}

File: App.js

import Drawer from './components/Drawer'

I get this error.

Answer 1

I haven't tried putting the drawer in a separate file but this is what I did

<Drawer
     type="static"
     content={<Menu closeDrawer={ () => this.drawer.close() }/>}
     openDrawerOffset={100}
     tweenHandler={Drawer.tweenPresets.parallax}
     tapToClose={true}
     ref={ (ref) => this.drawer = ref}
>
     <Router>
          <Scene key="root">
               <Scene key="home" initial={true}/>
          </Scene>
     </Router>
</Drawer>

I wasn't using a lot of configuration so it didn't bother me putting it directly where I have the Router.

Answer 2

Try this approach by explicitly defining and exporting class name MyDrawer:

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

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={<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>
        );
    }
}


export default MyDrawer; 

Change the file name to MyDrawer.js and then import using below routes:

import MyDrawer from './components/MyDrawer'
import TestView from './components/TestView'



  render() {
       return (
         <Router>
             <Scene key="drawer" component={MyDrawer}>
                  <Scene key="main" tabs={false} >
                     <Scene key="fireBaseTest" component={TestView} drawerImage={navToggle} />
                     //add more scenes here
                  </Scene>
             </Scene> 
         </Router>);

  }
}