react-native: How to combine react-native-router-flux and react-native-drawer?

I'm trying to integrate react-native-router-flux with react-native-drawer

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 created the following two files.

The first is NavigationDrawer.js

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

And the second is a near-empty SideMenu.js

import React from 'react';
import { View, Text } from 'react-native';

const SideMenu = () => (
  <View>
    <Text> 
      SideMenu
    </Text>
  </View>
);

export default SideMenu;

I tried then to modify scenes definitions adding into mainBucket definition the NavigationDrawer component

<Scene key="mainBucket" component={NavigationDrawer}>
  <Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
  <Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>

The problem is that I cannot see no more the react-native-router-flux headers with the title, so I've no more by top action bar.

What am I doing wrong'?

This works. I wrapped entire mainBucket with another Scene and in this Scene I used the drawer as component.

Also note that I moved styles to single scenes

const scenes = Actions.create(
  <Scene key="root">

    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>

    <Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>

    <Scene key="mainBucket" component={NavigationDrawer}>
      <Scene key="mainBucketInternal">
        <Scene 
          initital
          key="schedule" 
          component={Schedule} 
          title="Impegni" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
        <Scene 
          key="peopleList" 
          component={PeopleList} 
          title="Lista persone" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
      </Scene>
    </Scene>

  </Scene>
);

const AppRoutes = () => (
  <Router 
    scenes={scenes}
  />
);

export default AppRoutes;