Android hardware back button in ionic

Ionic Framework ionic-v3
1

Hello all,
in the tutorial for ionic 2 ionic 2 tutorial after clicking on an item the back button closes the app instead of going back to the list page I tried using platform

registerBackButtonAction but it didn’t work. here is the code I tried

import {Page, NavController, NavParams, Platform} from 'ionic-framework/ionic';
import {Inject} from 'angular2/core';
@Page({
  templateUrl: 'build/pages/item-details/item-details.html'
})
export class ItemDetailsPage {
  constructor(@Inject(NavController) nav, @Inject(NavParams) navParams,
  @Inject(Platform) platform) {
    this.nav = nav;
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
    this.platform = platform;
    console.log(this.platform);
    this.platform.registerBackButtonAction(function(){
    },500);
    // this.platform.onHardwareBackButton(function(e){
    //   e.preventDefault();
    //   return true;
    // });
  }
}
2 Likes
2

Hardware back button support is a feature we have not added yet. It’s on our road map

2 Likes
3

Is there any approximate timeline for this to be implemented in Ionic 2? At the moment, this makes using Ionic 2 for an Android app much less viable.

1 Like
4

You can checkout our public road map here

6

I think this should be the most basic feature and important. Android users are used to the back button, and will just stop using the app if it closes on pressing the back button.
I am considering moving to ionic, and will not publish my app unless I am able to implement this.

7

This feature already exists in ionic V1. Since V2 is still beta, there’s still some features we need to work on.

8

I solved it for now. Read my quick blog post on it here:

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

Cheers.

1 Like
9

What is the expected due date for beta 3?

10

No set due date right now

11

Hi

I’m a tad confused, why is there documentation for this:
http://ionicframework.com/docs/api/service/$ionicPlatform/#onHardwareBackButton

Are you saying this will not work yet?

Thanks

12

@nebrekab So that doc that you have linked to is for Ionic V1. We’re talking about Ionic V2

13

Or you could watch for the document event for back button and use it as you need, for example here’s mine from the init() method in the app.ts file inside platform.ready().then(() => {...}):

// ------------ Double back button press to exit---------------
      document.addEventListener('backbutton', () => {
        if (this.nav.canGoBack()) {
          this.nav.pop()
          return;
        }
        if(!this.backPressed) {
          this.backPressed = true
          window.plugins.toast.show('Presiona el boton atras de nuevo para cerrar', 'short', 'bottom')
          setTimeout(() => this.backPressed = false, 2000)
          return;
        }
        // this.platform.exitApp()
        navigator.app.exitApp()
      }, false);
3 Likes
14

Ah! A subtle but important detail :slight_smile:
Thanks for the reply. I’ll keep an eye on this, for the time being @Daveshirman fix worked.

15

His fix relies on alert while mine in toast notifications, both are valid options, it depends how you want the back button to work.

16

Hi,
I have the same problem, i use ionic 2 beta 8 and here is my code:

this.platform.ready().then(() => {
       this.hideSplashScreen();
       this.platform.registerBackButtonAction(function(event){
         let nav=this.app.getComponent('nav');
         if (nav.canGoBack()) {nav.pop();}
         else {this.confirmExitApp(nav);}
       },101);
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
   
    });

i tried on real device and the hardware back is disabled, it does nothing.
Any help please. I googled a lot for any example of use of registerBackButtonAction in ionic 2 but no result

17

hey guzs i also get same issue??any solution came??

18

Hey, I just worked through a similar problem that someone posted on my blog. You can find my answer to his (her?) question here, and the code implemented in a project on my GitHub. Hope it helps.

19

i write below code for back button handle but nothing happend

platform.registerBackButtonAction(() => {
console.log(‘in app.ts’);
if(menu.isOpen())
{
menu.close();
}else
{
nav1.pop();
}
});

i write this in all page. is there any issue to write in all page?

20

HI,

I’m tring to override the backbutton with:

this.platform.registerBackButtonAction(this.goBack);

goBack() {
	this.app.getRootNav().setRoot(Main);
}

But I always get:
Uncaught TypeError: Cannot read property 'getRootNav' of undefined

Anyone has seen and solved this?

Thanks

21

Maybe the app isn’t yet ready? Does it help to test the platform first?

For the record, to override the back button I did the following, works fine for me:

 onPageWillEnter() {
      this.platform.ready().then(() => {
        this.unregisterCustomBackActionFunction = this.platform.registerBackButtonAction(() => {
              // The special stuff I want to do and where I want to go
       });
    });
 }

and then later, before leaving my view, to set back the back action to her default behavior

  this.unregisterCustomBackActionFunction();
2 Likes