React-native-navigation: Can't block Android Back Button behavior in Modal

Created on 8 May 2019  路  4Comments  路  Source: wix/react-native-navigation

Issue Description

I can catch and alter the behavior of the Android hardware back button in every screen, but not in modals.
No matter what I do, the Android back button always dismisses the modal.

Steps to Reproduce / Code Snippets / Screenshots


```js

handleBackPress() {
ToastAndroid.showWithGravity(
"Please fill out the form",
ToastAndroid.SHORT,
ToastAndroid.CENTER
);
return true;
}

componentDidDisappear () {
BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress);
}

componentDidAppear() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
}

```
The code seems to work everywhere except in modals.


Environment

  • React Native Navigation version: 2.18.2
  • React Native version: 0.59.5
  • Platform(s) (iOS, Android, or both?): Android
  • Device info (Simulator/Device? OS version? Debug/Release?): Emulator, Debug and Release
馃彋 stale

All 4 comments

I have the same issue. The callback registered with "hardwareBackPress" is never called.

I solved it by setting overrideBackPresswhen showing the modal.

this.props.navigator.showModal( {
    screen: "your_screen",        
    overrideBackPress: true
} );

and then in the modal component you can listen on backPress event.

this.props.navigator.setOnNavigatorEvent( event => { 
            if ( event.id === "backPress" ) {
                // your logic
                return true;
            } 
} );

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

The issue has been closed for inactivity.

Was this page helpful?
0 / 5 - 0 ratings