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.

score 9 · Answer 1 · answered Aug 19 '16 at 18:15

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.

Shivam Sinha · Accepted Answer · 2016-08-22T21:45:30.360

7

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

  }
}

edited Aug 22 '16 at 21:45

answered Aug 13 '16 at 05:23

Shivam Sinha

4,924
7
43
65

After doing this, where should I put the routes? – berkayk Aug 22 '16 at 12:55
added an example of routes – Shivam Sinha Aug 22 '16 at 21:45
it worked, but how to close drawer when any menu is clicked. I tried passing `()=>Actions.refresh({key:state.key, open: false})` to `` and calling it, page navigates, but it doesn't close the drawer. – Priyesh Kumar Dec 31 '16 at 18:53
@PriyeshKumar: have you solved the problem with click-to-close? I have the same issue – realtebo Mar 13 '17 at 12:34
@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. – swedge218 May 12 '17 at 19:37
@Olaleke usually goes under whatever file are referenced in index.ios.js or index.android.js – Shivam Sinha May 12 '17 at 19:42
@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? – swedge218 May 12 '17 at 20:13
@Olaleke I think you need to create separate question for your case – Shivam Sinha May 12 '17 at 20:50
2

I am getting this error after following your steps, TypeError undefined is not a function evaluating state.children – Hanish Sharma May 07 '18 at 09:25
I am getting this error after following your steps, TypeError undefined is not a function evaluating state.children – Nguyễn Phúc Jan 21 '19 at 09:56

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

2 Answers2