react-native-router-flux with drawer AND tabBar in the same page

Question

I'm using react-native-router-flux version 3.37.0 with react native et redux. Everything worked fine, showing the tab bar, the nav bar and the navigation was correct. Then, I had to add a side menu (drawer) in the same pages where I have the tab bar. No one of the examples I found on the web show the two different menu in the same page. I don't get how it works. If I put the drawer in the root of the tab bar, the tab bar disappears. I'm sure it has to be an easy problem, but I don't get it working.

Please, help!

here I have the basic sideMenu component:

import React from 'react';
import {StyleSheet, Text, View} from "react-native";
import Button from 'react-native-button';
import { Actions } from 'react-native-router-flux';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
});

const SideMenu = (props, context) => {
  const drawer = context.drawer;
  return (
    <View style={[styles.container, props.sceneStyle ]}>
      <Text>Tab {props.title}</Text>
      <Button onPress={() => { drawer.close(); Actions.main(); }}>Switch to main</Button>
    </View>
  );
};

export default SideMenu;

Here the sideDrawer containing the sideMenu:

import React from 'react';
import Drawer from 'react-native-drawer';
import { DefaultRenderer, Actions } from 'react-native-router-flux';

import SideMenu from '../SideMenu/SideMenu';

class SideDrawer extends React.Component {
  render() {
    const state = this.props.navigationState;
    const children = state.children;
    return (
      <Drawer
        ref="navigation"
        type="displace"
        onOpen={() => Actions.refresh({ key: state.key, open: true })}
        onClose={() => Actions.refresh({ key: state.key, open: false })}
        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>
    );
  }
}

export default SideDrawer;

...and here the router. I'll cut some code to make it more readable.

import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry, Text } from 'react-native';
import { Actions, Scene, Router } from 'react-native-router-flux';
import LogIn from './containers/LogIn/LogIn';
import Main from './containers/Main/Main';
import Profile from './containers/Profile/Profile';
import SideDrawer from './components/SideDrawer/SideDrawer';

const TabIcon = ({ selected, title }) => {
    return (
    <Text style={{ color: selected ? 'red' : 'black' }}>{title}</Text>
    );
};

export default function native() {
  const Qweety = React.createClass({
    render() {
      return (
        <Provider store={configureStore()} >
          <Router>
            <Scene key='root'>
              <Scene 
                key='login'
                component={LogIn}
                hideNavBar
                initial
                type='replace'
              />
                {/* SIDE MENU */}
                <Scene 
                  key='drawer'
                  component={SideDrawer}
                  type='replace'
                >
                  {/* TABS MENU */}
                  <Scene 
                    key='tabbar'
                    tabs
                    hideNavBar 
                    tabBarStyle={{ backgroundColor: 'white' }}
                    type='replace'
                  >
                    {/* HOME PAGE */}
                    <Scene key='home' title='Home' icon={TabIcon}>
                      <Scene 
                        key='main'
                        component={Main}
                        title='Main'
                        initial
                      />
                    </Scene>
                    {/* PROFILE PAGE */}
                    <Scene key='2' title='Prof' icon={TabIcon}>
                      <Scene 
                        key='profile'
                        component={Profile}
                        title='Profile'
                      />
                    </Scene>
                  </Scene>
                </Scene>
            </Scene>
          </Router>
        </Provider>
      );
    }
  });

  AppRegistry.registerComponent('qweety', () => Qweety);
}