How add button on tab bar to open

[adaerodriguez]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.27 (v3 is not supported)
• react-native v0.55.3

Expected behaviour

I want to open drawer with a button on the right of my bottom tabbar

Actual behaviour

Currently this is my Router code:

<Drawer
          key="drawer"
          contentComponent={DrawerContainer}
          // drawerIcon={dr}
          drawerWidth={260}
          drawerPosition={'right'}
          drawer={true}
          hideNavBar
          drawerImage={ () => <Image source={require('./resources/icons/ic_add.png')} style={{ width: 60, height: 60, tintColor: 'red' }}/>}
        >
          <Tabs
            initial
            key="home"
            type={'reset'}
            headerMode='none'
            tabBarPosition='bottom'
            tabs
            showLabel
            swipeEnabled={true}
            lazy={true}
            wrap={false}
            tabBarStyle={styles.tabBarStyle}
            titleStyle={styles.titleStyle}
            navigationBarStyle={styles.navigationBarStyle}
            backButtonTintColor={'#FFF'}
          >
            <Scene key="tabProducts" tabBarLabel={strings('title.products')} icon={ ({focused}) => renderIconTab("tabProducts", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabMyAccount" tabBarLabel={strings('title.myAccount')} icon={ ({focused}) => renderIconTab("tabMyAccount", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabLists" tabBarLabel={strings('title.lists')} icon={ ({focused}) => renderIconTab("tabLists", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabNotifications" tabBarLabel={strings('title.notifications')} icon={ ({focused}) => renderIconTab("tabNotifications", focused) }
                   rightButtonImage={ openDrawer() }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>

            /** I want a button HERE to open my drawer **/            

          </Tabs>
        </Drawer>

Steps to reproduce

1. I tried the solution of the next link, but I got a white screen and DefaultRenderer is not found with V4 version: TabBar with Button for DrawerMenu?  #1744

2. I tried too another solution: DefaultRenderer in v4 #2710 and I could see my view but the Drawer is not rendered .

I need help to solve this problem.

Thanks!!!

[adaerodriguez]

I found the solution... tabBarOnPress on the Tabs did the trick. This is my code:

<Drawer
          key="drawer"
          contentComponent={DrawerContainer}
          // drawerIcon={dr}
          drawerWidth={260}
          drawerPosition={'right'}
          drawer={true}
          hideNavBar
          drawerImage={ () => <Image source={require('./resources/icons/ic_add.png')} style={{ width: 60, height: 60, tintColor: 'red' }}/>}
        >
          <Tabs
            initial
            key="home"
            type={'reset'}
            headerMode='none'
            tabBarPosition='bottom'
            tabs
            showLabel
            hideNavBar={true}
            swipeEnabled={true}
            lazy={true}
            wrap={false}
            tabBarStyle={styles.tabBarStyle}
            titleStyle={styles.titleStyle}
            navigationBarStyle={styles.navigationBarStyle}
            backButtonTintColor={'#FFF'}
            tabBarOnPress={ ({ scene, jumpToIndex }) => {
              const { key } = scene.route;
              if (key === 'tabOptions') {
                Actions.drawerOpen();
                return;
              }
              if(!scene.focused) {
                jumpToIndex(scene.index);
              }
            }}
          >
            <Scene key="tabProducts" tabBarLabel={strings('title.products')} icon={ ({focused}) => renderIconTab("tabProducts", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabMyAccount" tabBarLabel={strings('title.myAccount')} icon={ ({focused}) => renderIconTab("tabMyAccount", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabLists" tabBarLabel={strings('title.lists')} icon={ ({focused}) => renderIconTab("tabLists", focused) }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabNotifications" tabBarLabel={strings('title.notifications')} icon={ ({focused}) => renderIconTab("tabNotifications", focused) }
                   rightButtonImage={ openDrawer() }>
              <Scene key="products" component={ProductsContainer}/>
            </Scene>
            <Scene key="tabOptions" component={Blank} icon={ ({focused}) => renderIconTab("tabOptions", focused) }/>
          </Tabs>
        </Drawer>

I hope this could be helpful for somebody :)

I close this issue

[mobigaurav]

component={Blank} is not defined with the above solution.

[Belouccio]

tabBarOnPress={ ({ scene, jumpToIndex }) scene is undefined. Can you reopen this issue?

[hayait599]

this can be fixed by using the following code

tabBarOnPress = {({ navigation ) => {
  const key =  navigation.state.key;
  if (key === 'DrawerMenu') {
    Actions.drawerOpen();
    return;
  }
  if (!navigation.isFocused()) {
    Actions.jump(key);
  }
}}