How can I catch the device's back button event in vanilla nativescript?


#1

Hi,
I would like to perform some actions when the user taps back button on his device so, How can I capture that ??


#2

look here how to manage back button http://www.nativescriptsnacks.com/snippets/2016/11/03/back-button.html


#3

I don’t mean to be rude, but did you even try googling for it? Here’s just a couple results:

http://fluentreports.com/blog/?p=261


#4

thanks, @Pete.K,
I saw a stackoverflow thread but didn’t get it.


#5

@sagar1911 i found this on the internet edit
it from the Maestro @NathanaelA :champagne::champagne:
, put it in your app.js so that its used in all your App pages without even calling it(require),
app.js

var application = require("application");
var frame = require('ui/frame');
if (application.android) {
    application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);
}
function backEvent(args) {
    var currentPage = frame.topmost().currentPage;
    if (currentPage && currentPage.exports && typeof currentPage.exports.backEvent === "function") {
         currentPage.exports.backEvent(args);
   }
}

then in your other pages you want to use , or example map.js

exports.backEvent = function(args) {
    if (model.state=="visible") {
      hide();
      args.cancel = true;
      console.log("still on map");
    }

  }

in the above code, if back buttton is pressed, it will check if the modal page over the map is visible, if not it will navigate back to previous page but if visible, it will cancel navigating back args.cancel = true;
and call a function i use to hide the modal, by the way this is my actual code from my app, so in plain English put this in your pages JS files DO NOT forget the code for the app.js above

exports.backEvent = function(args) {
   //put your logic HERE!!
      args.cancel = true; //to prevent navigating back
   //you only want to prevent navigating back
  }

Android back button and *ngIf
#6

Hi @sagar1911
My way to do it would be,

exports.attachBackPressListener = function() {
    const app = require("application");
    if (app.android) {
        const activity = app.android.foregroundActivity;
        activity.onBackPressed = function() {
            // Do what you want to do
        };
    }
};

Remember to clear this listener when you navigate to other pages.

exports.clearBackPressListener = function() {
    const app = require("application");
    if (app.android) {
        const activity = app.android.foregroundActivity;
        activity.onBackPressed = function() {
            const fm = require("ui/frame");
            fm.topmost().goBack();
        };
    }
};

P.S you may move the require statement to the top of your file.
If you forget to clear the listener, then all your subsequent pages will still do the same thing as the “attachBackPressListener” does.

Cheers!


How to catch navigating away from page (Angular, ios)
#7

that’s in my honest opinion, a bit tough! clearing the listener in each page!!:face_with_raised_eyebrow: the code i posted above is in App.js and you just call the backEvent from any page, it does all you are suggesting !! don’t get me wrong am not saying your code wont work! but its better if it were a reusable code than writing it all over the place


#8

Hi @devyaz ,
You are right. Your solution is better when you want to run the same code everywhere.
Mine is better when you want to run different code.
It’s all about the use case. :slight_smile:
Cheers!