How to move tabBar when drawer is open in react-navigation

Question

I use TabNavigator and DrawerNavigator both in my app.

When I open drawer with 'slide' option, contents slide with drawer but TabBar doesn't slide together.

I want to make TabBar slide together but I cannot find any option about it.

How Can I do this? Could you help?

-------------[code]----------------

1) app.js

    ...skip ...

    const DailySalesStack = createStackNavigator({
        DailySalesMain: DailySalesMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesMain'
    });

    const DailyRivalRankStack = createStackNavigator({
        DailyRivalRankMain: DailyRivalRankMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailyRivalRankMain'
    });

    const SalesAnalysisStack = createStackNavigator({
        SalesAnalysisMain: SalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'SalesAnalysisMain'
    });

    const DailySalesAnalysisStack = createStackNavigator({
        DailySalesAnalysisMain: DailySalesAnalysisMain,
    },
    {
        defaultNavigationOptions:{
            header:null
        },
        initialRouteName:'DailySalesAnalysisMain'
    });

    /// DRAWER!
    const SalesStack = createDrawerNavigator({
        DailySales: {
            screen: DailySalesStack,
        },
        DailyRivalRank: {
            screen: DailyRivalRankStack,
        },
        SalesAnalysis: {
            screen: SalesAnalysisStack,
        },
        DailySalesAnalysis: {
            screen: DailySalesAnalysisStack,
        },
    },
    {
        contentComponent:SalesSlideMenu,
        drawerType: 'slide',
        drawerWidth:230*REM,
    }
    );

...skip...

    /// BOTTOM TAB
    export default createAppContainer(createBottomTabNavigator(
        {
            MainStack:MainStack,
            ApprovalStack:ApprovalStack,
            SalesStack:SalesStack,
            OrganizationStack:OrganizationStack,
            SettingStack:SettingStack,
        },
        {
          tabBarComponent: TabBar,
        }
    ));

2) tabBar.js

const TAB_LIST = [
    require('../../resources/images/tabIcon_main.png'),
    require('../../resources/images/tabIcon_approval.png'),
    require('../../resources/images/tabIcon_sales.png'),
    require('../../resources/images/tabIcon_organization.png'),
    require('../../resources/images/tabIcon_settings.png'),
];

export default class TabBar extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {      
        console.log("[TabBar.js] : Render ====");

        const {
            onTabPress,
            navigation
        } = this.props;

        const { routes, index: activeRouteIndex } = navigation.state;

        return (
            <SafeAreaView style={{backgroundColor:'rgb(250,250,250)'}}>
                <View style={styles.rootContainer}>
                {routes.map((route, routeIndex) => {
                    const isRouteActive = routeIndex === activeRouteIndex;
                    return (
                        <TouchableWithoutFeedback key={routeIndex} onPress={() => {onTabPress({ route });}}>
                            <View style={styles.tabIconContainer}>
                                <Image style={[styles.icon,isRouteActive&&{tintColor:'black'}]} source={TAB_LIST[routeIndex]} resizeMode={'contain'}/>
                                {/* <View style={[styles.badge]}><Text style={[styles.text,styles.badgeNumber]}>12</Text></View> */}
                            </View>
                        </TouchableWithoutFeedback>
                    );
                })}
                </View>
            </SafeAreaView>
        );
    }
}

3) SlideMenu.js

const MENU_LIST = [
   {'icon':require('../../resources/images/dailySales.png'),'label':'Daily Sales','subLabel':'','route':'DailySales'},
   {'icon':require('../../resources/images/rivalRank.png'),'label':'Daily Rival Rank','subLabel':'','route':'DailyRivalRank'},
   {'icon':require('../../resources/images/salesAnalysis.png'),'label':'Sales Analysis','subLabel':'','route':'SalesAnalysis'},
   {'icon':require('../../resources/images/dailySalesAnalysis.png'),'label':'Daily Sales Analysis','subLabel':'','route':'DailySalesAnalysis'},
]

class SlideMenuTab extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
            <View style={{flex:0}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.navigate(this.props.data.route+"Main")}>
                    <View style={[styles.tabContainer,this.props.focused&&{backgroundColor:'rgb(247,247,247)'}]}>
                        <Image style={styles.tabIcon} source={this.props.data.icon} resizeMode={'contain'}/>
                        <View style={styles.labelContainer}>
                            <Text style={[styles.text,styles.label]}>{this.props.data.label}</Text>
                            <Text style={[styles.text,styles.subLabel]}>{this.props.data.subLabel}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

export default class SalesSideMenu extends React.Component {
    constructor(props) {
        super(props);
        console.log("[SalesSideMenu.js] : Constructor");
    }

    render() {
        console.log("[SalesSideMenu.js] : render ====");
        let menuList = [];

        MENU_LIST.forEach((data)=>{
            let focused = this.props.activeItemKey === data.route;
            menuList.push(
                <SlideMenuTab data={data} focused={focused} navigation={this.props.navigation}/>
            );
        })

        return (
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <View style={styles.rootContainer}>
                    {menuList}
                </View>
            </SafeAreaView>
        );
    }

}

4) Screen with drawer

export default class DailySalesMain extends React.Component {
    constructor(props) {
        super(props);
    }


    render() {
        console.log("[DailySalesMain.js] : render ====");
        return (
            <View style={{flex:1,backgroundColor:'white',alignItems:'center',justifyContent:'center'}}>
                <TouchableWithoutFeedback onPress={()=>this.props.navigation.openDrawer()}>
                    <View style={{width:'100%',height:50}}>
                        <View style={{width:50,height:50,backgroundColor:'blue'}}></View>
                    </View>
                </TouchableWithoutFeedback>
                <Text>DailySalesMain</Text>
            </View>
        );
    }

}

Add some code of your Drawer and Tab Navigator. Just a small hunch if you have Drawer Navigator inside a TabNavigator. Try putting Tab Navigator inside Drawer Navigator. — Ashwin Mothilal, Jun 15 '19 at 18:43
@AshwinMothilal Plus, I want to use darwer only in Third Tab. — newbeeep, Jun 16 '19 at 05:54
can anyone help with the use of react-navigation v5 for above issue. — Pragnesh, Sep 14 '20 at 09:25

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

If youre ussing React Native... This should be the default behaviour at least in iOS. Android Material Design supports the Drawer as a design desition, so if you want to hide the TabBar, just make a custom one or include the TabBar inside the Drawer.

But warning, hidding the TabBar may sometimes bring errors in Apple Store when you upload your app for revision.

From the TabBar section in the Human Interface Guidelines of iOS....

Don't hide a tab bar when people navigate to different areas in your app. A tab bar enables global navigation for your app, so it should remain visible everywhere. The exception to this is in modal views. Because a modal view gives people a separate experience that they dismiss when they're finished, it's not part of the overall navigation of your app.

Use badging to communicate unobtrusively. You can display a badge—a red oval containing white text and either a number or an exclamation point—on a tab to indicate that new information is associated with that view or mode.

In other words.. if you plan to support iOS in your apps, you should try to always show the TabBar somehow, or the store might give you some usability complains like this one.

We noticed that several screens of your app were crowded or laid out in a way that made it difficult to use your app.

Please see attached screenshot for reference.

Next Steps

To resolve this issue, please revise your app to ensure that the content and controls on the screen are easy to read and interact with.

How to move tabBar when drawer is open in react-navigation

1 Answers1