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

user_7255552 0
Viewed 445

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

react-navigation react-native back-button android
1 Answers

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(),

user_72555520
Related