NativeScript: Upgrading to v1.60

Since I have been posting these since the early versions of NativeScript; I figured I would continue.   It has been several months since the last major upgrade and this version has all sorts of bug fixes and new goodies.   The changelog is available at https://github.com/NativeScript/NativeScript/releases/tag/v1.6.0

Some of the new features that I'm looking forward to trying out is new percentage(%) width/height code.   This should allow us to build even better screens.  And the massively upgraded CSS selector code which now allows CSS selectors like we use on the web.

1. npm install -g nativescript
if you now look at your nativescript --version you should have a nice v1.6.0 show up.  You only have to do this one time.

2. npm install tns-core-modules@latest --save
What, that is it to install all the new core modules?  WooHoo, so simple!   Make sure you do this on EACH of your projects!

3. tns platform remove android AND/OR tns platform remove ios
Please note before you run the above commands if you have made ANY changes to the xcode project, plists or the Android manifest; you might want to back them up first, or you will have to manually make those changes again.  Again this has to be done for EACH of your projects...

4. tns platform add android AND/OR tns platform add ios
This also needs to be done for each project.  You can do a type package.json or cat package.json and you should see everything say "1.6.0"

Again a big Kudos for the teams involved in making the updated from v1.3 onward so seamless; if you look at my prior upgrade posts you can see how much EASIER it is to upgrade now.

Tow Gotcha's on Android: when you convert to v1.6.0 (I assume they will fix it in 1.6.1), if you get a "Unhandled Exception -- Java.lang.RuntimeException: Unable to create application" when your app starts.  The easy solution for this that involves fixing your app.js file; as you probably have something attempting to get the application context.   The simple solution is to rewrite your app.js file to be:

var application = require("application");
if (global.android) {
    application.start({moduleName: "main-page"});
}

// All your custom initialization code 
// including any additional require statements...

if (!global.android) {
    application.start({moduleName: "main-page"});
}

Second gotcha, DO NOT USE clearHistory: true in any of your navigation calls, this will corrupt the navigation and cause some majorly WEIRD issues.

9 comments

  1. Hmmm thanks Nathaneal but now I am getting

    com.tns.NativeScriptException: No weak reference found. Attempt to use cleared object reference id=-1213391080
    at com.tns.Platform.getJavaObjectByID(Platform.java:633)
    at com.tns.Platform.callJSMethodNative(Native Method)
    at com.tns.Platform.dispatchCallJSMethodNative(Platform.java:812)
    at com.tns.Platform.callJSMethod(Platform.java:711)
    at com.tns.Platform.callJSMethod(Platform.java:690)
    at com.tns.Platform.callJSMethod(Platform.java:680)
    at com.tns.gen.android.app.Fragment_ftns_modules_ui_frame_frame_l34_c42__.onDestroyView(android.app.Fragment.java)
    at android.app.Fragment.performDestroyView(Fragment.java:1898)
    at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:954)
    at android.app.FragmentManagerImpl.removeFragment(FragmentManager.java:1167)
    at android.app.BackStackRecord.run(BackStackRecord.java:641)
    at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1447)
    at android.app.FragmentManagerImpl$1.run(FragmentManager.java:443)
    at android.os.Handler.handle

    1. That is an interesting error. Can you tell me what you are doing that produces this? It looks like it is when you are using the back button, but not sure. Do you have any plugins on this screen? Does it happen every time?

      1. It is when I load up a new view from button tap (topmost().navigate()). The "loaded" function of the new view attempts to load up a custom module that is "required" correctly and attempts to set my observable viewModel to an object inside the module. I can send more code if that would help? All of this worked fine before and no code has changed on these views or modules since the upgrade to 1.6. No plugins other than the module is written in typescript.

        Just heard there is 1.6.1 out now for android..

          1. same problem here too (happened just once fortunately). difficultt osay how to reproduce. It happened when using topmost().navigate with context

  2. useful article!
    I didn't have any issue with Android even though I had to refactor some code.
    % feature is the coolest part!

    About the advanced css selector, where do I find detailed information?
    also, besides selector, are any new css properties supported?

    1. You can see what CSS is support at http://docs.nativescript.org/ui/styling

      The selectors used to only support one depth; i.e. you could do "Button" or "#someId" or ".someClass" you couldn't combine selectors. Now selectors can support multiple levels
      "Button #someId { background-color: #0000ff; }"

      I don't think their is any documentation yet on it.

  3. If you wouldn't mind sending me the code; that will make it a lot easier to debug the cause. You can either submit an actual issue (if you don't mind public code) at github.com/nativescript/nativescript ;--if you don't want any of your code to be public; feel free to send it via email the nathan@master-technology.com and I'll attempt to narrow down why it is crashing and get a bug report in for you... The smaller the test case the easier it will be to diagnose the cause.

    1. Nathanael traced this down to the clearHistory property in my code here:

      var navigationEntry = {
      moduleName: "./views/home/home",
      // clearHistory: true,////////////////////Bug in NS 1.6
      animated: false
      };
      frameModule.topmost().navigate(navigationEntry);

      This is a known issue in 1.6 now I believe. Commented out and it works.

Leave a Reply to Nathanael Anderson Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.