React-native-router-flux: Example on how to create two drawers? Left & Right?

[markrickert]

Version

• react-native-router-flux v3.35.0
• react-native v0.31.0
  

  Problem

I'm looking to implement a left drawer as navigation and a right drawer as a supplemental info drawer but can't seem to find examples or documentation on how to implement two drawers.

Any info on this or pointing me in the right direction to figure out how to do this would be appreciated!

[Iyoss]

Hello!
I have done this. This can be mistaken, but it works for me :)
react-native-drawer - 2.2.2,
react-native-router-flux - 3.36.0,
react-native - 0.35.0

index.js

<Router>
  <Scene key='root'>
    <Scene key='leftDrawer' component={LeftDrawer} open={false}>
      <Scene key='rightDrawer' component={RightDrawer} open={false}>
        <Scene key='main_wrapper'>
          <Scene key='main' component={MainPage}
            title={'test string'}
            rightButtonImage={require('./filter.png')}
            onRight={() => Actions.refresh({key: 'rightDrawer', open: value => !value })}
            leftButtonImage={require('./hamb.png')}
            onLeft={() => Actions.refresh({key: 'leftDrawer', open: value => !value })}
          />
        </Scene>
      </Scene>
    </Scene>
  </Scene>
</Router>

RightDrawer.js

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

LeftDrawer.js

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

and ManePage.js

export default class MainPage extends Component {
  render() {
    return (
      <View style={{marginTop: 60}}>
        <MainList/>
      </View>
    );
  }
}

[markrickert]

Thanks @lyoss this really helped. I hadn't thought to embed the right inside the left and everything else inside the right. I was trying to put the right drawer in as just a regular screen route.

I really appreciate the time you took to put the answer together. I've got it working in my app.