The backHandler prop for MenuProvider is not working.

[muhammadtaha1998]

I have tried passing true and also a custom function but none of them worked. When I press back the app navigates back to the previous screen and the menu also closes. I just want the menu to close which should be working by backHandler={true} as per the documentation but it is not. Here is my MenuProvider component.

<MenuProvider
      backHandler={true}
      customStyles={{
        backdrop: {
          backgroundColor: 'black',
          opacity: 0.6
        }
      }}
    >
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Splash" component={SplashScreen} />
          <Stack.Screen name="Tab" component={TabNavigator} options={{ headerLeft: null }} />
        </Stack.Navigator>
      </NavigationContainer>
</MenuProvider>

[shiroze]

I have tried passing true and also a custom function but none of them worked. When I press back the app navigates back to the previous screen and the menu also closes. I just want the menu to close which should be working by backHandler={true} as per the documentation but it is not. Here is my MenuProvider component.

<MenuProvider
      backHandler={true}
      customStyles={{
        backdrop: {
          backgroundColor: 'black',
          opacity: 0.6
        }
      }}
    >
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Splash" component={SplashScreen} />
          <Stack.Screen name="Tab" component={TabNavigator} options={{ headerLeft: null }} />
        </Stack.Navigator>
      </NavigationContainer>
</MenuProvider>

for me this worked.

try using this method : https://github.com/instea/react-native-popup-menu/blob/master/examples/CloseOnBackExample.js

[aavhanchatse]

Same problem.

[TheAlmightyBob]

This is due to a conflict between react-native-popup-menu and react-navigation. The example works because it does not use React Navigation.

React Navigation registers its own BackHandler listener, and it does so after MenuProvider (I believe related to its use of Hooks/useEffect rather than componentDidMount). This means that its handler is called first and navigation is performed even if a menu is open.

[thanhluantl2304]

This is due to a conflict between react-native-popup-menu and react-navigation. The example works because it does not use React Navigation.

React Navigation registers its own BackHandler listener, and it does so after MenuProvider (I believe related to its use of Hooks/useEffect rather than componentDidMount). This means that its handler is called first and navigation is performed even if a menu is open.

Why was this commit still not merged? Still face this problem until now!

[asalha]

Any workaround to this problem? I am pressing the back button and the menu is always open. I didn't find any way to make it work 1. I tried the controlled example too, it doesn't work with functional component 2. I tried the "opened" property along with useState() and it didn't work too.

[TheAlmightyBob]

@asalha You can patch in https://github.com/instea/react-native-popup-menu/pull/205. If that doesn't fix your issue you might have a different issue.

[asalha]

@asalha You can patch in #205. If that doesn't fix your issue you might have a different issue.

Thank you, applying the patch works in case the screen is popped out of the stack when clicking on the back button, but I am using @react-navigation/bottom-tabs where you press the back button on the device but practically you don't leave the screen, the screen remains in the stack. Any idea how to fix that? Thanks

[TheAlmightyBob]

I also use @react-navigation/bottom-tabs, but I'm afraid I don't understand what you're saying or how it relates to the pop-up menu.

[TheAlmightyBob]

@sodik82 I think this issue should now be fixed via #251 🙂

[sodik82]

hopefully yes.. let me know if there is something else happening