How to handle Android back button in Drawer navigator having stack nested inside

Question

I have a Drawer Navigator on top of a Stack Navigator, then from any nested screen inside stack, on click of Hardware Back Button, root level Drawer Navigator Screen's BackHandler Listeners are getting called..

 const Drawer = createDrawerNavigator(); const DrawerNavigator = props => { return ( <Drawer.Navigator drawerContent={props => <DrawerScreen {...props} />} initialRouteName={'HomeScreen'} drawerPosition={'right'} drawerStyle={{width: '100%', backgroundColor: 'transparent'}} screenOption={{backBehavior: 'order'}}> <Drawer.Screen name="App" component={AppStackNavigator} options={{gestureEnabled: false}} /> </Drawer.Navigator> ); }; const RootStack = createSwitchNavigator( { Login: LoginStackNavigator, Drawer: DrawerNavigator, RouteNavigator: RouteNavigatorClass, OnBoardStack: OnboardStackNavigator, OTP: { screen: OTPScreen, }, }, { initialRouteName: 'RouteNavigator', }, );

if I press hardware back button in any screen, Home Screen's back handler is getting called.. it started happening when I am upgrading react-navigation 2.x to 5.x

Answer 1

I used react-navigation-backhandler from https://github.com/vonovak/react-navigation-backhandler ,

 import { AndroidBackHandler } from "react-navigation-backhandler"; class SomeComponent extends React.Component { onBackButtonPressAndroid = () => { if (youWantToHandleTheBackButtonPress) { // do something return true; } return false; }; render() { return ( <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid}> <BodyOfYourScreen /> </AndroidBackHandler> ); } }

and It worked, I was not able to do this using BackHandler.addEventListner(),