Nativescript: Navigation is slow on Android with tns-core-modules version 2.3.0

[VladimirAmiorkov]

Moved from https://github.com/NativeScript/nativescript-angular/issues/453

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes currently there is nothing about this issue in the community channels.

Tell us about the problem

When upgrading to the latest NativeScript tns-core-modules 2.3.0 I started getting an issue where navigation on Android is really slow (it looks like the fade-in animation gets stuck).

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 2.3.0
• Cross-platform modules: 2.3.0
• Runtime(s): "tns-android" 2.3.0 and "tns-ios" 2.3.0
  

  Please tell us how to recreate the issue in as much detail as possible.

Create an app which implements navigation between different screens, at which point during the navigation the transition (on API 23 the fade-in) seams stuck. You can reproduce this by cloning the nativescript-ui-samples-angular or non Angular nativescript-ui-samples and changing the tns-core-modules version to 2.3.0 here.

Is there code involved?

Nothing custom, simply using the NativeScript navigation implementation on Android.

[denkomanceski]

+1

[deneshr]

Seems like changes introduced in #2665 is causing this issue.

Function scheduleGCOnIdle() in file tns-core-modules/ui/transition/transition.android.ts
line 16 gc(); is causing the momentary freeze.

[denkomanceski]

Is this thing fixed ? how do you guys navigate on android, its extremely bad on my nexus tablet (I am using angular2 but the problem probably comes from the core and not angular)?

[sivsushruth]

also navigation fails in the following scenario,
1) Click on link in tab view
2) Open new page
3) Go back
4) Click on another link

I can see the content being initialised in the console for the new link, however the view is not rendered

[deneshr]

Changes in #2665 (Manually kickstart GC for android after navigation) is causing garbage collection to happen during each navigation.
This gc() call is freezing the app during each and every navigation.
I have temporarily commented out the gc() call directly in the js file and built and run the app. (Defeats the purpose of the patch, but apps navigate smoother)

One thing I noticed was, disabling default animations by using RouterExtensions for routing avoids this freeze.
But that is not a good solution, because using the back button still causes the freeze.

@PanayotCankov could you please shed some light on this.

[sivsushruth]

@deneshr The fix when you disable transition is not a good one. Even I tried it. Although you cannot see the lag, it is still causing the frame to pause temporarily

[thomasmoon]

+1

[adisoftbn]

+1

[9thwall]

+1

[karan1149]

+1

[ghost]

+1

[coltcook]

+1000?

We're currently in the proof of concept stage trying to pick a platform and this definitely didn't help my case for NativeScript...

[ghost]

@coltcook revert to 2.2.1 for the concept and will work fine, until this bug is released perhaps on 2.4 , maybe...

[coltcook]

Yeah, that fixed the issue (had to downgrade TypeScript to 1.8.10 too). I was just pointing out how bad of an experience this is, especially with the majority of the sample apps being in vanilla JavaScript, so not impacted by this--I assumed it was a mistake on my part.

But thanks!

[taikahessu]

+1 We're experiencing the same thing. Hope this will be fixed soon.

[vakrilov]

Some updates on this one:

The freeze is indeed caused by the gc() call as @deneshr found. This fix was needed to avoid memory issues when navigating between pages. The memory problem is caused by large image bitmaps which are not collected property and ultimately leads to a crash due to OutOfMemory exception.

@hshristov is currently working on a solution to the memory problem (part of it in #2832) which will allow us to remove the need for a manual gc() call.

[hshristov]

Already in master branch with changes in Image module. OOM Exception should be rare if at all.
Please try with @next of tns-core-modules and tns-core-modules-widgets.

[prp1]

Executed npm install tns-core-modules@next --save @ npm install tns-core-modules-widgets@next --save.

After running tns livesync android --watch --emulator, now I get errors:

10-06 17:38:51.424 4248 4248 W System.err: com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
10-06 17:38:51.424 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:716)
10-06 17:38:51.424 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:697)
10-06 17:38:51.424 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:687)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.callJSMethodNative(Native Method)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:716)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:697)
10-06 17:38:51.429 4248 4248 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:687)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.callJSMethod(Runtime.java:716)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.callJSMethod(Runtime.java:697)
10-06 17:38:51.430 4248 4248 W System.err: at com.tns.Runtime.callJSMethod(Runtime.java:687)

[VladimirAmiorkov]

The "next" version of tns-core-modules works like a charm in nativescript-telerik-ui-samples-angular, awesome work thanks.

[darmie]

@hshristov I still got an out of memory error after updating to @next.

This happened after a few transitions from page to page.

[denkomanceski]

This bug is still not fixed .. maybe its the angular router? After the page finishes the navigation the view is unusable for 2 seconds on Android..

[ekubyshin]

+1
I'm thinking about migrating to reactnative...

[hshristov]

Hey guys,

please attach a project that demonstrate the problem. It could be that you have different versions of modules (e.g. if you are using UI for {N} they could define older version in package.json) and CLI choose to use the older version.

Please try on clean project with @next of tns-code-modules & tns-code-modules-widgets and if you see a problem - attach the project so that we could investigate it.

[prantikv]

Still getting the lag on navigation and the view which is navigated to or back is unusable for a few seconds.

[ganeshhfs]

I am loading View dynamically while navigating the page but still it take much time to navigate. I have updated latest tns module in my application but it also not working and page freeze on navigation.This issue occurring only on android device but it working fine and fast on ios devices as compare to android device. Please share solution for this if any one fixed or used in their application and do the needful.

[Blah2014]

iOS nativescript + angular 3.0 navigate to another page transition freezing for 2 seconds if navigating from page which have a big images, was ok version 2.5.2

[gabitoesmiapodo]

Routing performance of Angular 4 + TNS 3 seems very bad, there's lag every time I press a button and / or use the router somehow.

I tried everything I could think of, but the lag is still there, except when I use the back button.

This happens in Android and iOS (to me, at least).

[vakrilov]

@gabitoesmiapodo Does you app have big images too? Do you think it is the same problem as @Blah2014?

[gabitoesmiapodo]

Hi!

It only has a background image on the login section, around 600x800px / 50kb. From there, it goes to a "home" section with a regular ListView. It's all static for now, there's no server connection or anything.

I've included the Telerik SideDrawer plugin, which has a back button, it works fine, transitions are great when opening / closing. It's just when I go to another page that the app seems to lag: press button / wait a few milliseconds (small lag, like maybe 300ms) / it goes to the section.

[jogboms]

Experiencing exactly same issue as @gabitoesmiapodo with dynamically generated views on page navigation. Same versions of TNS and NG as well.

[jeffswitzer]

I've also been wrestling with this for some time. On android if I navigate via angular 4 router back and forth between two pages (no images on these two pages) every once in a while I get a 2 to 3 second freeze before the page is navigated. I'm thinking this is garbage collection, but I've tried temporarily disabling gc by adding the following to app/package.json and still see the lag:

"android": {
        "v8Flags": "--expose_gc",
        "gcThrottleTime": 99999,
        "memoryCheckInterval": 0,
        "freeMemoryRatio": 0.0
}

The lag spikes occur approximately every 5 seconds when navigating back and forth.

Is there another way to disable garbage collection to see if that's the issue?

--EDIT--
Also I just found out for me this isn't unique to using the angular router. If I have a page with four buttons that toggles displaying a subcomponent via *ngIfs then I also get the same freezes every few seconds when tapping these buttons. For instance if the buttons are bound to activeTab and:

<StackLayout>
        <siteVisitDetails #siteVisitDetailsChild *ngIf="activeTab == 'site-visit-details'"></siteVisitDetails>
        <plants #plantsChild  *ngIf="activeTab == 'plants'"></plants>
        <animals-checklist #animalsChecklistChild  *ngIf="activeTab == 'animals-checklist'"></animals-checklist>
        <animals #animalsChild *ngIf="activeTab == 'animals'"></animals>
</StackLayout>

[MartinMitro]

HI! I experience similar issues with tns-core-modules 3.1.0. On simple screens the lag is around 300ms. But I have also a custom camera page and when I'm navigating from that page to another the lag is around 4 to 5 seconds so it is really irritating. I found out that when I comment call to gc() in onActivityDestroyed everything works really nice and smooth.

[vakrilov]

@hshristov Is the gc() call in the onActivityDestroyed we still need?

[hshristov]

@vakrilov Probably not. But we need test app to profile before we remove it.

[vakrilov]

@martin-mitro Can you please elaborate a little bit on what you application is doing. Ultimately, it will be best if you could share some code so that we can profile and test for sure.

Something interesting - the onActivityDestroyed should not be called on normal navigation as we are using fragments and not creating new activities.

One more thing - we have recently pushed quite a few changes in the navigation, which will may have impact on the performance (PR #4652). They are not yet released officially but you can try them out using the @next tag from npm.

[MartinMitro]

@vakrilov Hi, I think my case is not "normal navigation". My case: I have to capture a photo with custom overlay on top of preview. I had a cordova android plugin which does that, so I just tweaked it a little bit and call it from nativescript with startActivityForResult. After the picture is taken I navigate to next page to show the photo. Screen is shown immediately, but it is inactive for about 4-5 seconds.

[vakrilov]

@dvdbrk Do you mind opening a separate issue about your problem with more detail.
This thread is quite old(since NS 2.3) and it hard to tell which of the comments are still valid.

[MehdiAroui]

still have the navigation lag probleme
TNS 3.1.3
angular 4.1.3

[rsaf]

I'm having this issue while closing the modal page
this.params.closeCallback();

"tns-core-modules": "~3.1.0"

[bhavincb]

+1 latest nativescript + angular navigation lags . page does contains images. i'm migrating app from ionic to Nativescript, however even with large number and size of images, ionic never had trouble with navigation.

[Blah2014]

NativeScript has a good/unique integration with native platforms, so sad... but I have to switch to ReactNative

[jeffswitzer]

I used to have some of these issues but haven't for some time now. @bhavincb @Blah2014 You can try adding the following to your app/package.json to see if you get performance improvements:

{
  "android": {
    "markingMode": "none"
  }
}

Also using NativeScript-fresco improved image performance under android tremendously for me.

[an-ravishankar]

Hello all
I am facing the issue of freezing when i try to navigate to another component my apps freezes for 4 to 5 seconds .
I am using
TNS 5.2.0
angular 7.1.4
I have looked for gc() but it not present may be it has been updated in this version also I have tried @jeffswitzer solution but it causes the same problem . Please suggest some more solution for this.

this._router.navigate(['/circuit'], {
  queryParams: {
    id: this.Id,
    title: name,
    description: description,
    pId: this.FirstCheckBox.nativeElement.checked,
    sId: this.SecondCheckBox.nativeElement.checked,
  },
});

[PieterHartzer]

I am experiencing a similar problem. Android states my app is not responding and wants to kill it some times.

My app is using Vue instead of Angular.

I have nested frames and the innermost Frame is the one lagging when I use

this.$navigateTo(page, {
    frame: "innerFrame",
    transition: "slideLeft"
})

Main Tab navigation works perfect. So far it's only a sub-frame causing the problems every few seconds. Sometimes it's mid transition, so part of the page is sowing.

Is there any debugging/logging I can turn on to help get to the bottom of the issue?

[ohralathe]

I used to have some of these issues but haven't for some time now. @bhavincb @Blah2014 You can try adding the following to your app/package.json to see if you get performance improvements:

{
  "android": {
    "markingMode": "none"
  }
}

@jeffswitzer thank you, It solved my issue. the navigation is better now.
Everyone can check more detail about markingMode

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.