React-native-router-flux navigation clubbing drawer with bottomtab bar navigation

Question

Although there exists a lot of leads about react-native-router-flux and drawer navigation, i can't seem to figure out how do i club my existing bottomtab bar navigation with the side drawer.

Current routes that i have

      import React from 'react'
      import { Scene, Router, Actions, ActionConst } from 'react-native-router-flux'
      import LoginConnector from '../connectors/LoginConnector'
      import BottomTabbarConnector from '../connectors/BottomTabbarConnector'
      import Logout from '../layouts/login/Logout'
      import SelectionModal from '../layouts/login/SelectionModal'


      const scenes = Actions.create(
        <Scene key="root">
          <Scene key="login" component={LoginConnector} initial={true} hideNavBar/>
          <Scene key="selectionModal" component={SelectionModal} type={ActionConst.REPLACE} hideNavBar />
          <Scene key="logout" component={Logout} type={ActionConst.REPLACE} hideNavBar />
          <Scene key="bottomtabbar" component={BottomTabbarConnector} type={ActionConst.REPLACE} hideNavBar />
        </Scene>
      );
      export default () => (
        <Router scenes={scenes} />
      );

So whats happening is i load the login screen when the app starts, then on successful login i just call Actions.bottombar() which loads by Bottom Tab Bar which i have implemented using TabNavigator from react-native-tab-navigator The tab switching works perfectly without any problems.

Now i want to add more screens and adding more tabs is not an option as i already have 5 tabs. So i want to implement the side drawer. And i am not able to figure out how do i configure my routes such that on successful login i continue to have the bottom tab bar intact in addition with the side drawer. The side drawer will have more screen navigation options on selection go to those respective screens I tried adding

 <Drawer
 type="static"
 content={<Menu closeDrawer={ () => this.drawer.close() }/>}
 openDrawerOffset={100}
 tweenHandler={Drawer.tweenPresets.parallax}
 tapToClose={true}
 ref={ (ref) => this.drawer = ref}
 >
 <Router>
           <Scene key="gallery" />
           <Scene key="logout" />
      </Scene>
 </Router>
</Drawer>

to my existing route but nothing happens. I have tried way too many things and failed.

Request for some help. Any help and pointers to solving this is much appreciated.

Thanks, Vikram

Answer 1

refer below code, in 'contentComponent' of Drawer you can design your own drawer with and pass to contentComponent as passed below. hope this code will help you.

import SideMenu from '../Component/SideMenu'

 <Router>
      <Stack>
           <Scene hideNavBar>
                <Scene initial>
                   <Scene
                    hideNavBar
                    key="mainApp"
                    drawerIcon={
                       <Icon
                       name="menu"
                       size={25}
                       color="white"
                       onPress={() => Actions.drawerOpen()}
                       />
                       }
                       drawer
                       contentComponent={SideMenu}
                       >
                          <Scene
                          initial
                          key="tab"
                          wrap={false}
                          tabBarPosition="bottom"
                          showLabel={false}
                          tabs
                          type={ActionConst.REPLACE}
                          tabBarStyle={{ backgroundColor: Constants.colors.themeColor }}
                          >
                              <Scene>...........</Scene>
                              <Scene>...........</Scene>
                              <Scene>...........</Scene>
                              <Scene>...........</Scene>
                              <Scene>...........</Scene>
                          </Scene>
                     </Scene>
               </Scene>
          </Stack>
   </Router>