Issue with Android Back Button

Capacitor
1

I am building an Angular project with Capacitor.

Expected Behavior:

  • When I am on the homepage of my app and press the Android hardware back button, the app should exit.

Actual Behavior:

  • When I press the back button on the homepage, nothing happens.

  • The app does not exit, and it also does not navigate anywhere.

  1. Is this the default behavior in Capacitor?
  2. Do I need to manually handle the back button event in my Angular app to make the app exit when on the homepage?
2

Hmmm…I feel like it use to close the app. Maybe something to do with Android 13+ predictive back gesture? There was this PR that was just released in @capacitor/app in 7.1.0 that might help.

2 Likes
3

You can do that manually by subscribe to actions with priority, like that:

(in constructor of the main page)


    this.platform.backButton.subscribeWithPriority(1, (next) => {
      // close action sheet if there's any
      this.actionSheetCtrl.getTop()
      .then((element) => {
        if (element) {
            element.dismiss();
        } else if (this.routerOutlet && !this.routerOutlet.canGoBack()) {
          //if it's root menu, close the app
          App.minimizeApp();
        } else {
          //if none of the above, call regular BackButton handler
          next();
        }
      })
      .catch(() => {
        //if any error in the code above, call regular BackButton handler
        next();
      });
    });
1 Like