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.

Placate

Answer 1

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>);

  }
}

Progeny

After doing this, where should I put the routes? – Waterside

added an example of routes – Progeny

it worked, but how to close drawer when any menu is clicked. I tried passing ()=>Actions.refresh({key:state.key, open: false}) to <SideMenu /> and calling it, page navigates, but it doesn't close the drawer. – Ecto

@PriyeshKumar: have you solved the problem with click-to-close? I have the same issue – Goral

@ShivamSinha inside what file does the Router set up go pls? Is it in the main router set up or the component where the drawer is to be displayed? The flux doc is unclear to me on this. – Rifleman

@Olaleke usually goes under whatever file are referenced in index.ios.js or index.android.js – Progeny

@ShivamSinha I have that. The problem is when I do Actions.map(), nothing happens. map is a Scene key and the map Scene is a child of the drawer Scene in my Router.js file. But I am not able to show the map scene up. Can you suspect what the problem is? – Rifleman

@Olaleke I think you need to create separate question for your case – Progeny

I am getting this error after following your steps, TypeError undefined is not a function evaluating state.children – Warfold

I am getting this error after following your steps, TypeError undefined is not a function evaluating state.children – Tessi

Answer 2

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.

Magical