React Native - Android - Issue with Disabling Back Button Globally

Question

So, I have an issue with React Native in Android. I have the following navigator:

const AppStackNavigator = createStackNavigator({
    loginFlow: createStackNavigator({
        Start: { screen: Start },
        Signup: { screen: Signup },
        Login: { screen: Login },
    },{
        headerMode: "none",
        initialRouteName: "loginFlow",
    })
});

With this, I have 3 screens, Start, Signup and Login, with loginFlow being the initialRouteName . Start.js contains the following:

componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}

handleBackButton() {
    // Logic to increment backPresses removed, opens as Alert (confirm)
    if(global.backPresses >= 2){
        BackHandler.exitApp();
    }
    return true;
}

render() {
    return (
        <Row>
            <Col>
                <Button full onPress={() => this.props.navigation.navigate("Signup")}>
                    <Text>{"Sign Up"}</Text>
                </Button>
            </Col>
            <Col>
                <Button full onPress={() => this.props.navigation.navigate("Login")}>
                    <Text>{"Log In"}</Text>
                </Button>
            </Col>
        </Row>
    );
}

Essentially, Start.js acts as a hub for Signup and Login. Most importantly it sets the hardwareBackPress event listener to return true; , to globally disable the Android back button, unless a double-press of the back button is caught (logic removed for brevity's sake).

Pressing the back button on Start, or navigating to Signup/Login then pressing the back button does nothing, which is the expected behaviour.

This functionality all works great, until Backhandler.exitApp() is called, the app is closed, and then reopened. When this happens, the back button is disabled on Start, but as soon as I navigate to Signup/Login, I can press the back button and return to Start, which is not the expected functionality.

To summarize:

1. Open App
2. Press Back (Nothing)
3. Navigate Forward
4. Press Back (Nothing)
5. Double Press Back (Exit, on Confirm)
6. Reopen App
7. Press Back (Nothing)
8. Navigate Forward
9. Press Back (Navigates Back) PROBLEM

I believe this is an issue with BackHandler.exitApp(); , as just globally disabling the back button works fine. I can't figure it out though; when reopening the app, the code appears to work, but doesn't seem to apply anymore after navigating forward. Also, I'm never removing the event listener, as illustrated by results of step 4, but something seems to be preventing it.

Has anyone else seen this issue?

Answer 1

In your component will mount in signup you can add the event listener for backhander with exit app function. this will help it will not redirect you to start screen just close your app.

Answer 2

Doesn't removeEventListener in componentWillUnmount resolve this issue?

componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.handleBackButton);
}

handleBackButton() {
    // Logic to increment backPresses removed, opens as Alert (confirm)
    if(global.backPresses >= 2){
        BackHandler.exitApp();
    }
    return true;
}

Calling componentWillUnmount won't remove global listener of back button, as Start.js View will only be unmounted if user closes the app. On navigation to other View through the navigator, the component remains mounted, even if it isn't visible (at least this is the behavior in react-native-navigation).