Wrap Drawer around Router

Hey there. I am trying to wrap the react-native-side-menu component around the Router, so it is on top and not under the navBar. I really can´t figure out where the right place is to put it and especially how to pass the Router props down/up to the SideMenu Routes. This was my try:

class App extends Component {
  render() {
    return (
        <SideMenu
            menu={<Components.Menu/>}
            isOpen={false}
        >
            <Router
                firstRoute={{
                    name: 'LOGIN',
                    component: Login
                }}
                headerStyle={{
                    backgroundColor: 'black',
                    elevation: 5
                }}
                backButtonComponent={ Components.BackButton }
            />
        </SideMenu>
    );
  }
}

Now how can i pass toRoute props to Components.Menu?

[BigPun86]

@shakdoesgithub i ended up using react-native-drawer with type overlay. If you want to have the side menu covering the complete side it is opened then you should add the noStatusBar prop to your router…

[eljago]

render() {
  return (
    <SideMenu
      menuPosition='right'
      touchToClose={true}
      isOpen={this.state.isOpen}
      disableGestures={true}
      menu={
        <Menu onPress={this._onPress.bind(this)} />
      }
    >
      <Router
        ref={'router'}
        firstRoute={routes.Cinemas}
        headerStyle={styles.header}
        backButtonComponent={BackButton}
        customAction={this._openMenu.bind(this)}
        handleBackAndroid={true}
        rightCorner={MenuButton}
      />
    </SideMenu>
  );
}

_onPress(routeData) {
  this.refs.router.onForward(routeData, this.refs.router.refs.navigator);
}

I tried this and the main view animates to the left, with the navigation bar staying in place. Also got the following warning:

Warning: flattenChildren(...): Encountered two children with the same key, `.$scene_0`. Child keys must be unique; when two children share a key, only the first child will be used.