Ionic 4 alternative for platform.registerBackButtonAction

Question

I looked around the new platform for the Ionic 4, it seems like the registerBackButtonAction function was removed from it.

Are there any other alternatives to handle the Android hardware back button?

Answer 1

Update: This was fixed in v4.0.0-beta.8 (dfac9dc)

---

Related: how to integrate hardware back button into ionic4 navigation

---

This is tracked on GitHub, in the Ionic Forums and Twitter
Until there is an official fix, you can use this workaround:

this.platform.backButton.subscribe(() => {
  // code that is executed when the user pressed the back button
})

// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribeWithPriority(0, () => {
  // code that is executed when the user pressed the back button
  // and ionic doesn't already know what to do (close modals etc...)
})

^{Be aware that you need to save the result of subscribe(...) if you ever want to unsubscribe from it again.}

---

Old answer: (out of date as of April 2018)

registerBackButtonAction is just a wrapper for the corresponding Cordova call.

So you can just take your old call to registerBackButtonAction:

this.platform.registerBackButtonAction(() => { 
  // code that is executed when the user pressed the back button
});

and replace it with:

this.platform.ready().then(() => {
  document.addEventListener("backbutton", () => { 
    // code that is executed when the user pressed the back button
  });
});

Answer 2

i tried on

"@ionic/angular": "^4.7.0-dev.201907191806.32b736e",
"@ionic/core": "^4.7.0-dev.201907191806.32b736e",

it works!

ionic git commit https://github.com/ionic-team/ionic/commit/978cc39009a9a0fb065540ce17e10c685b6c101a

Answer 3

In case of @ionic/vue you can put this (or something like this) in main.js

import { Plugins } from '@capacitor/core'

Plugins.App.addListener('backButton', function() {
  console.log(111);
  window.history.back();
});

No, no, console.log(111); is not mistake, it's part of solution :)