I am not being able to get the backHandler (Hardware Back Button on Android) to work with my Drawer and Stack Navigation on React-Navigation The back button works perfectly on the homepage screen and but it stops working once i navigate to next screen wether the screen is in the drawer screen or in the stack. Here is my both Drawer and MainStackNavigator.
Note: Combining the two didn't work for me as both of them are not part of a component and I am using redux in my app
Anyone has any idea how this could be resolved?
DrawerNavigatior
const DrawerNavigator = createDrawerNavigator(
{
Homep: Homepage,
Home: HomeScreen,
Shop: ShopScreen,
Order: OrdersScreen,
Wishlist: WishlistScreen,
Search: SearchScreen,
Profile: ProfileScreen,
ShoppingBag: ShoppingBagScreen,
},
MainStackNavigator
const MainStackNavigator = createStackNavigator(
{
Drawer: { screen: DrawerStackNavigator },
CategoryProductGrid: { screen: CategoryProductGridScreen },
Settings: { screen: SettingsScreen },
Contact: { screen: ContactUsScreen },
EditProfile: { screen: EditProfileScreen },
ShippingAddress: { screen: ShippingAddressScreen },
LocList: { screen: LocationList },
ShippingMethod: { screen: ShippingMethodScreen },
PaymentMethod: { screen: PaymentMethodScreen },
AddACard: { screen: AddACardScreen },
Checkout: { screen: CheckoutScreen },
Bag: { screen: ShoppingBagScreen },
},
I am using BackHander event listener as follows
componentDidMount() {
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
this.backHandler.remove()
}
handleBackPress = () => {
Alert.alert(
'Exit App',
'Exiting the application?',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel'
},
{
text: 'OK',
onPress: () => BackHandler.exitApp()
}
],
{
cancelable: false
}
);
return true;
};