Tag Archives: Tips

NativeScript - Professional post series

I've been doing NativeScript for a while; and since I'm a contractor/freelancer; and no specific company pays my salary -- I've decided to start putting some of my cool learned tips into the paid category.   Most of these will only qualify if they took me multiple hours to figure out.  Unfortunately nobody pays me for fixing things when they break...  So, if I can use my hard earned knowledge to save you a vast amount of time, what is it worth to you?
All this knowledge is time tested and can save you a vast amount of diagnostic time on why something doesn't work.   So if you think saving you time is worth it; please feel free to sign up and support me; and I will provide the information you need when you need it...
The different series are going to be available on my Patreon site: https://www.patreon.com/NathanaelA
The first series is; NativeScript Platform Differences


You might get an app running perfectly on one platform, and then wonder why it isn't working on the other.   I have started out with a cool post on several issues you might have between iOS and Android using HTTP/HTTPS.

The second series is: Troubleshooting your NativeScript
I have started this series out on dealing with Upgrading from NativeScript  to 2.4 and issues you might face.
The first post in this series deals with a specific iOS upgrading issue.
The second post in this series deal with a specific Android upgrading issue (Error starts with: Multiple dex files), when using several plugins...
The third series is: Ready to Distribute my app...  What now?
The first post in this series deals with a specific iOS Build issues...
The second post in this series deals with a specific iOS Build configuration information.
Some of these posts will be showing up in the next couple day as I have time to finish them off...
And yes; I will continue to post free useful stuff...   😉

NativeScript: Patreon Posts & Plugins

For those who are unaware; I've started doing paid content; see my post on "Why Patreon" to see the reasons.   I'm going to attempt to keep this post updated with plugins and posts that are available to those who are my patreon supporters.

Posts:

 

Plugins:

 

NativeScript - Capturing the Back Button on Android

Quite frequently you want to control what happens when your user hits the back button, well this is actually pretty simple to do on Android.  I've seen this question pop up several times; so it makes good blog post fodder.

You can either do this totally globally; or on a per page basis.   Globally, you just need to add the following code to your app.js file:

Global Event Handler:

// application variable should already be included in the app.js file
// Only do this on android
if (application.android) {
  application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);
}

// This does the work on deciding if you want to go back
// arg.cancel = true will cancel navigating back
function backEvent(args) {
   if (dontGoBack) { args.cancel = true; }
}

You just need to figure out what your criteria is to handle canceling going back.

 

Individual Page Handler:

Now I personally prefer to put the handler on each page I need it on; so it is a little bit different.

You need to have a pageLoaded and a pageUnloaded event.

// Somewhere at the top
var application = require('application');

// Somewhere in your page you need to register your handler
exports.pageLoaded = function() {
    // We only want to register the event in Android
    if (application.android) {
        application.android.on(application.AndroidApplication.activityBackPressedEvent, backEvent);
    }
};

// When we navigate away from this page, we need to de-register the handler.
exports.pageUnloaded = function() {
    // We only want to un-register the event on Android
    if (application.android) {
        application.android.off(application.AndroidApplication.activityBackPressedEvent, backEvent);
    }
};

// This does your checks to see if you want to go back
// setting cancel=true will cancel the back 
function backEvent(args) {
  if (iRefuseToGoBack) { args.cancel = true; }
}

In your page.xml your "Page" declaration should look like:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      loaded="pageLoaded" unloaded="pageUnloaded">

You might notice in the individual page view version I register and de-register the event.  Each time the page is loaded it will register the event, if you don't de-register the event then that event handler will STILL run each time you hit the back button.  So it is very important if you are not using a global handler, to register on load, and de-register on unload.

 

Advanced Global Technique:

There is one other way to do this; I created this technique in my nativescript-orientation plugin and as I was finishing up this post I realized it could apply here and eliminates all the busy work of registering and de-registering handlers on each page but allows you per-page handlers.  I'm actually going to switch my apps to this way; because now that I wrote it -- it is my favorite way.  🙂

In your app.js file:

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 &amp;&amp; currentPage.exports &amp;&amp; typeof currentPage.exports.backEvent === "function") {
         currentPage.exports.backEvent(args);
   }   
}

Then in any page you want to control the back Event you do:
exports.backEvent = function(args) {
  if (iDontReallyWantToGoBack) { args.cancel = true; }
}

Pretty simple you only need to have a single global register; and it checks to see if the current page has a back handler which it will call if it exists.

Have fun, and now we can all stop going back.  😀