androidreact-nativereact-navigationreact-navigation-bottom-tab

How to handle back button behavior in bottom tabs in React Native?


I have a @react-navigation/bottom-tabs navigator when my app opens whose contents are like:

    <Tab.Navigator
        tabBarOptions={{
            activeTintColor: '#77dd77',
            inactiveTintColor: 'gray',
        }}
        tabBar={props => <MyTabBar {...props} />}
        backBehavior={"history"}
        >
        <Tab.Screen
            name="Home"
            component={Home}
            options={{ title: 'Home' }}
        />
        <Tab.Screen
            name="Orders"
            component={Orders}
            options={{ title: 'Orders' }}
        />
        <Tab.Screen
            name="Profile"
            component={Profile}
            options={{ title: 'Profile' }}
        />
    </Tab.Navigator>

I have a BackHandler in my code that makes the app exit when back button is pressed from the home page. Everything is fine and I have checked that the backhandler gets called when back button is pressed.

But when I switch to any other tab and then return to the homepage and press back to exit the app, backhandler stops working and the app shows error "The action 'GO_BACK'was not handled by any navigator. Is there any screen to go back to?"

This is a development-only warning but in the signed version, the app doesn't show any error and doesn't even exit.

How can I address this 'GO_BACK' action?


Solution

  • I was using backhandler in all my tabs to create a navigation flow I wanted. Turns out this was creating the issue. After removing the backhandlers from the rest tabs, the app runs smoothly now.

    I am now trying to experiment more with backBehavior in tab navigator to try to get the flow I want.

    Writing my problem here gave me a clearer view of my problem!