Hardware back button with Ionic 4

Ionic Framework
1

Is the hardware back button working with ionic 4? I’ve started a project using the sidemenu starter template. When running ionic serve, going back works (pressing the back button) on the browser. Then I try running

ionic cordova prepare android
ionic cordova run android -l

The app loads, the items on the menu work but using the hardware back button doesn’t. It doesn’t go anywhere. Is it intended? Do I need to code it myself? I haven’t found any information regarding this.

Ionic:

   ionic (Ionic CLI)          : 4.0.2 (C:\Users\josea\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.2.0
   OS     : Windows 10

Environment:

   ANDROID_HOME : not set
2

Not sure what’s the status about back button, I do notice that I didn’t found the registerBackButton action and I opened an issue about that https://github.com/ionic-team/ionic/issues/14932

3

Could you make sure that it’s not working? I found it weird that it’s not working and I was (am) going crazy. I thought that maybe I was doing something wrong with the project I had already finished but then I created a project using one of their starter templates. No luck.

The registerBackButton disappeared but now you have to subscribe.

this.platform.backButton.subscribe(() => {
  // this does work
});
6 Likes
4

Give me five…will try to build my v4 app for android for the first time and check if back button works on android

5

try this if you want to use a hardware back button to navigate back in your app. put following code in app.component.ts

var lastTimeBackPress = 0;
  var timePeriodToExit = 2000;

  platform.registerBackButtonAction(() => {
    // get current active page
    let view = this.nav.getActive();
    if (view.component.name == "HomePage") {
      //Double check to exit app                  
      if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
        platform.exitApp(); //Exit from app
      } else {
        let toast = this.toastCtrl.create({
          message: 'Press back again to exit App',
          duration: 3000,
          position: 'bottom'
        });
        toast.present();
        lastTimeBackPress = new Date().getTime();
      }
    } else {
      // go to previous page
      this.nav.pop({});
    }
  });
4 Likes
6

Thank you for the suggestion. i remember doing this on v1 but in v4 the back button doesn’t seem to work, at least for me. Not sure if an Ionic v4 issue, the cordova-plugin-ionic-webview (2.0.0) or cordova (6.4.0). Plus, besides pages I’m also using alerts and popovers (as customizable popups, modals didn’t work the way I wanted).

And the code you are suggeting works in v3 but not in v4 because the registerBackButtonActino was removed in favor of subscribing to an… observable (? i think).

7

also in v3, view.component.name if I remember correctly doesn’t work if you use lazy loading

8

Yes it doesn’t work,
I just suggest, how to do it and also I had use this in ionic v4 in my current project and it works fine.

9

Give me 10 more minutes…you know, first install, GSM and plugin conflicts :wink:

10

Oh! Really? I didn’t actually try it. On Visual Studio Code I get this message:

[ts] Property ‘registerBackButtonAction’ does not exist on type ‘Platform’.

@reedrichards No problem, haha.

11

Are you sure it works on v4? I tried building it and got this message:

[ng] ERROR in src/app/app.component.ts(26,19): error TS2339: Property ‘registerBackButtonAction’ does not exist on type ‘Platform’.

1 Like
12

there isn’t such a method in v4, see query https://github.com/ionic-team/ionic/search?q=registerBackButtonAction&unscoped_q=registerBackButtonAction which gives nothing back

ps.: sorry takes too much time to install my android platform

13

I had to try it because he said it’s working fine on his project.

Don’t worry. I’m working on an alternative just in case the back button doesn’t actually work. Not sure if it’s an ionic v4 issue, its webview plugin or cordova.

14

Just give me some time currently I am working on it and I will give you a code.

15

But could you confirm that the back button in a device is not working as the back button in the browser? Go to a page, press the back button and doesn’t go back. Before I didn’t need to do anything for the back button to work with its default behaviour, but now maybe we have to do it ourselves?

16

finally able to add my platform and build…I gonna test now

17

@joseadrian doesn’t work for me neither

could you open an issue in the ionic GitHub repo?

18

On the ionic-team repo, right?

And thank you for your time.

19

Yep https://github.com/ionic-team/ionic/issues

20

Issue opened https://github.com/ionic-team/ionic/issues/15117

2 Likes