How to combine Router and navigation Drawer?

[realtebo]

My main component is actually App.js . I copy/paste only relevant pieces.

import AppRoutes from './Router';
...
constructor(props) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        Actions.mainBucket({ type: 'reset' });
      } else {
        Actions.authBucket({ type: 'reset' });
      }
    });
    super(props);
  }
}
...
  render() {
    const store = createStore(
      reducers, 
      {}, 
      applyMiddleware(ReduxThunk)
    );

    return (
      <Provider store={store}>
        <AppRoutes />
      </Provider>
    );
  }

This is Router.js

const scenes = Actions.create(
  <Scene key="root" hideNavBar open={false} >
    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>
    <Scene key="authBucket">
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>
    <Scene key="mainBucket" hideNavBar={false}>
      <Scene key="schedule" component={Schedule} title="Impegni"  />
      <Scene key="peopleList" component={PeopleList} title="Lista pesone"/>
    </Scene>
  </Scene>
);

const AppRoutes = () => (
  <Router 
    sceneStyle={{ paddingTop: 65 }} 
    scenes={scenes}
  />
);

export default AppRoutes;

My goal is to add the SideDrawer into the Scene bucket with key "mainBucket"., because, as you can see, this is/will be the main portion of my app, and user is automatically redirect to this bucket implementing autologin using firebase.

The autologin and the opening of the mainBucket works.

To start working with adding sidedrawer, I think the sidedrawer content componente initially will render just a <Text> usingn SideMenu component

How must I procede?

I see the following code in the example page, but I'm not able to understand

• where and how to render this component into my Router.js file.
• what is or should be 'state'
• what are or should be 'state.children'

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