How to handle back button android to both exit app and close react native navigation side menu when it is open in home page

Question

I am using react native navigation Wix side menu in my project. I want to close it when It is open and user clicks on mobile physical back icon. But I have defined for the back button to close my app when user clicks on it. So my back icon should do two following works:

1- it should close the menu when it is open. 2- it should exit from app when the menu is close.

I have saved the status of the side menu (open: true , close:false) in redux store to handle it. But the problem is when user open or close the menu with swiping on mobile screen. In this case I cannot update my state in redux store. I cannot disable this option (Swiping) of side menu in react native navigation to get ride of the problem. So I do not know how to fix it!

score 0 · Answer 1 · answered May 27 '20 at 07:58

You could listen to the componentDidAppear event in your Side menu screen to set your redux store state for its visibility.

Also you could add Backhandler event handler in your screen to either close the side menu or exit the app.

For example:

useEffect(() => {
  BackHandler.addEventListener('hardwareBackPress', () => {
    if (reduxStore.sideMenuOpened) {
      // Close the side menu.
      closeSideMenu()
      // Prevent the Backhandler's event bubbling up.
      return true
    }
    // Let the backhandler's event bubble up to close the app if you are in root screen.
    return false
  })
}, [])

How to handle back button android to both exit app and close react native navigation side menu when it is open in home page

1 Answers1