Outlet "freeze" on Back navigation after side navigation using Nested Outlets

[Pandishpan]

Environment
√ Component nativescript has 6.2.0 version and is up to date.
√ Component tns-core-modules has 6.2.1 version and is up to date.
√ Component tns-android has 6.2.0 version and is up to date.

Describe the bug
If you navigate forward in the parent outlet from a nested outlet, that outlet "freeze" and no interaction can be done when you return to it by back navigation. Furthermore, the border of the elements, in the nested outlet, disappear after the navigation.
The issue is fixed when you suspend the app and reactivate it.

To Reproduce
Use the sample playground project provided on the bottom of this issue, press "Go to Welcome Page" then "Go to Tabs Page". From that view, on the PLAYERS tab, you can Tap on the button "Go To Welcome (ISSUE)" and press back to see the issue.
You can also try to tap on the button "Go To Welcome (ISSUE)" and press back from the detail page after you pressed on "Player One" or "Player Two". Navigating from that page it has the same behaviour.

Expected behaviour
Normal navigation with nonblocking UI.

Additional context
This issue started with nativescript version 6.2.0, the nested outlet navigation, including back navigation it was working fine up to nativescript version 6.1.2.

Sample project
Playground Sample

[gmavritsakis]

Having the same issue here.

What is the problem
After much digging in the nativescript sources I found out that actually it has to do with the tabview and a backgroundImage tabview sets on top of the UI which is what we see when we return back to the tab.

Playing with many tabs, I discovered that if you navigate to the tab n+2 of the current (2 tabs away) and come back again to the current the tab becomes active again.
Actually, this happens because tabview has a property androidOffscreenTabLimit which is the number of views tabview retains in memory in order to be able to swipe between them.
When we have androidTabsPosition="bottom" this option is fixed to 1, which means the current tab plus one around are kept alive. That is why navigating 2 tabs away , destroys current (blocked) tab and re-resurrects it afterwards removing the overlay image so as to become alive.

[Not] solution
I tried to set androidOffscreenTabLimit="0" removing the androidTabsPosition="bottom" option and now the tab was active again if I navigated one tab away (does not solve the problem).

Environment
This started happening after upgrading to nativescript version 6.2.0 and the problem is that I cannot downgraded anymore as I ahve upgraded CLI, web pack etc.

A workaround is desperately needed!

[Pandishpan]

Hi @gmavritsakis, your observation on tabs sounds like another side effect of the issue. The only workaround at this moment was to stick to the older version of the NativeScript ecosystem(all the packages before 6.2.0). The problem is on outlet navigation.

Right now, I'm trying to pinpoint the actual problem. In which package, and the right version. Maybe it will help the dev team to fix it much sooner. But it is difficult, due to breaking changes with the new scoped NPM packages, you need to upgrade multiple packages at the same time to be compatible between different versions.

PS: downgrading it was a mess :( I had to downgrade CLI, web pack, nativescript-theme-core V2 to V1, all the styling syntax specific to @nativescript/theme V2, tns platform, nativescript-angular ......
If you still have some time to wait, I hope in the next major release it will be fixed. I don't think that there are any other workarounds to this issue.

[aftoncreative]

Did anyone ever manage to find a workaround for this issue? Seems to still happen in the latest version.

[manuelruelas]

I had the same issue, the only solution i found was downgrade.

[alqabali]

@Pandishpan , @manuelruelas any fix for this issue ? i still face the issue in the latest version !!

[manuelruelas]

@alqabali I don't know the origin of the problem, my project works fine with Nativescript 6.1

[Pandishpan]

@alqabali
options:

• stick to 6.1.2 on Android (on iOS the issue is not present)
• ditch Angular 😢 and use NS core
• fix the problem yourself and share it in here so that we all benefit from it 🆘

I will take a look these days because I also want to use the latest version of NS.

[aftoncreative]

Let us know if you find a fix. I have this issue also and ran out of time trying to find a fix.

What I ended up doing is changing the navigation logic to get around the issue:
-Navigating out of the tabs -> Opening the content in modal instead
-When navigating out of the tabs-view, disabling the back-method and use routing to return to the tabs view.

-> Not optimal and certainly does not fit all situations, but this is a workaround I had to take.

For me it is unbeliveable that there seems to be no help from the NativeScript-team on this one.

[Pandishpan]

@aftoncreative @manuelruelas @alqabali @gmavritsakis @NickIliev
I didn't manage to fix it yet but I pinpoint the problem into the tns-core-modules package.

I upgraded all other packages to the latest version and the problem appears when I upgrade tns-core-modules starting with npm version 6.2.0-next-2019-09-12-143317-01

√ Component nativescript has 6.4.1 version and is up to date.
‼ Update available for component tns-core-modules. Your current version is 6.2.0-next-2019-10-16-010641-01 and the latest available version is 6.4.2.
√ Component tns-android has 6.4.1 version and is up to date.

There are a lot of changes in that version of tns-core-modules, especially on the Android side. 😢
https://diff.intrinsic.com/tns-core-modules/6.1.2/6.2.0-next-2019-10-16-010641-01