NativeScript handling back button event

Question

I am trying to handle the hardware back button in a NativeScript app. I am using NativeScript version 2.3.0 with Angular.

Here is what I have in main.ts

Answer 1

I'm using NativeScript with Angular as well and this seems to work quite nicely for me:

import { RouterExtensions } from "nativescript-angular";
import * as application from "tns-core-modules/application";
import { AndroidApplication, AndroidActivityBackPressedEventData } from "tns-core-modules/application";

export class HomeComponent implements OnInit {
  constructor(private router: Router) {}
    
  ngOnInit() {
    if (application.android) {
      application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
        if (this.router.isActive("/articles", false)) {
          data.cancel = true; // prevents default back button behavior
          this.logout();
        }
      });
    }
  }
}

Note that hooking into the backPressedEvent is a global thingy so you'll need to check the page you're on and act accordingly, per the example above.

Answer 2

Normally you should have an android activity and declare the backpress function on that activity. Using AndroidApplication only is not enough. Try this code:

import {topmost} from "ui/frame";
import {AndroidApplication} from "application";

let activity = AndroidApplication.startActivity ||
            AndroidApplication.foregroundActivity ||
            topmost().android.currentActivity ||
            topmost().android.activity;

activity.onBackPressed = function() {
    // Your implementation
}

You can also take a look at this snippet for example

Answer 3

import { Component, OnInit } from "@angular/core";
import * as Toast from 'nativescript-toast';
import { Router } from "@angular/router";
import * as application from 'application';

@Component({
  moduleId: module.id,
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  tries: number = 0;
  constructor(
    private router: Router
  ) {
    if (application.android) {
      application.android.on(application.AndroidApplication.activityBackPressedEvent, (args: any) => {
        if (this.router.url == '/main') {
          args.cancel = (this.tries++ > 0) ? false : true;
          if (args.cancel) Toast.makeText("Press again to exit", "long").show();
          setTimeout(() => {
            this.tries = 0;
          }, 2000);
        }
      });
    }
  }
}

Answer 4

As far as I know, NativeScript has a built-in support for this but it's not documented at all. Using onBackPressed callback, you can handle back button behaviour for View components (e.g. Frame, Page, BottomNavigation).

Example:

function pageLoaded(args) {
  var page = args.object;
  page.onBackPressed = function () {
    console.log("Returning true will block back button default behaviour.");
    return true;
  };
  page.bindingContext = homeViewModel;
}

exports.pageLoaded = pageLoaded;

What's tricky here is to find out which view handles back button press in your app. In my case, I used a TabView that contained pages but the TabView itself handled the event instead of current page.