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?
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!