Is there a way to prevent the user pressing the back button on their device from popping the current view from the stack?

Question

I'm using React-Native-Navigation from Wix (version 2) to setup navigation in my React Native app. I'm using the sideMenu layout with the center section being a stack. When the user selects one of the side menu items the selected view is pushed onto that center stack. If the user presses their back button on Android, then the view is popped from the stack, but I don't always want this to happen, mainly if the view they selected is a WebView.

If the view is a WebView, I want to manually handle the user pressing the hardware back button. If the WebView can "goBack" then the view will go back, but if it can't then the view will be popped from the stack (as it normally would).

I've tried overriding the back button press using the BackHandler class from react-native and this allows me to capture that press and have the WebView go back if able, but the act of popping the view from the stack also fires. Is there a way in React-Native-Navigation v2 to tell it, "Hey I got this, don't pop unless I tell you to."?

My current code for this section is as follows:

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandler);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}

backHandler = () => {
    if (this.state.canGoBack) {
        this.webviewRef.current.goBack();

        // I thought this might force the back press to be
        // ignored by react-native-navigation, but no dice.
        return false; 
    } else {
        // WebView can't go back so pop view like normal
        Navigation.pop(this.props.componentId);
    }
}

I was expecting this to only pop the view from the stack if the WebView can't currently go back and otherwise just have the WebView go back.

What actually occurs is both events fire. I.e. the WebView goes back, but the view is also popped from the stack.

score 0 · Answer 1 · answered Jan 15 '19 at 16:03

I was able to find the answer to this through some more digging in the React Native Navigation and React Native docs.

The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called.

So the issue was in my backHandler method. Instead of returning false I needed to return true.

backHandler = () => {
    if (this.state.canGoBack) {
        this.webviewRef.current.goBack();

        // We've handled the event so we return true and the
        // handler on the view's parent can effectively be ignored. Yay!
        return true;
    } else {
        // WebView can't go back so pop view like normal
        Navigation.pop(this.props.componentId);
    }
}

Is there a way to prevent the user pressing the back button on their device from popping the current view from the stack?

1 Answers1