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

[timdoege]

I just tested the 6.5.0 release and the issue is still there, unfortunately.

[alqabali]

@NickIliev you don't think this a MUST issue to fix before moving on to other things?

[alqabali]

no response from the NS Team !!!!

[NickIliev]

@alqabali the TabView is a deprecated component and the team doesn't plan to work on it in the near future.

Important: With version 6 of NativeScript the TabView component is deprecated. Consider using BottomNavigation or Tabs components instead as these components are providing much greater control and functionalities.

Of course, we are welcoming contributors - both the core modules and the Angular repository are open-source and we are accepting new PRs.

I would advise against creating complex Angular routes and stick to the main mobile concepts (no more than 3 levels of navigation) - after al;l we are creating mobile applications. Here is an article about some of the supported nested navigation scenarios in Angular

[timdoege]

Hi @NickIliev, Thanks for looking into this and your input on routing strategies.

My guess is that a lot of NativeScript Angular apps are using the app-structure from this article:

"Implementing a Login for NativeScript Apps with Tab-based Navigation"

(https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation) since it covers the needs of many apps.

The freeze-issue is not related to the deprecated TabView component and is also occurring when using BottomNavigation.

I did an upgrade of the sample repo (PR has been submitted)

https://github.com/NativeScript/login-tab-navigation-ng

to the latest NativeScript 6.5 and updated it to use BottomNavigation instead of tabs.

To illustrate the issue, I modified the upgraded sample with a simple route to an "external" page (leaving the bottom navigation component). When navigating back, the current tab semi-freezes and can only be restored by either switching tabs or suspending+focusing the app. The repo can be found here:

https://github.com/timdoege/login-tab-navigation-ng-back-issue

A simpler test-repository with the same issue is this one

https://github.com/m-abs/ns-debugging/tree/master/bottomnavigation-break-on-navigation (from https://github.com/NativeScript/NativeScript/issues/8251)

[alqabali]

@NickIliev i upgraded my app to use BottomNavigation and still the issue exists exactly as @timdoege detailed .

[vytautas-pranskunas-]

I think it is critical thing because most apss cannot implement programatic navigation...

[sashok1337]

Also waiting for this issue fix. NS 6.5.0 and BottomNavigation.

[timdoege]

After upgrading to NS 6.5.1 (and nativescript-dev-webpack to 1.5.1) I am no longer able to reproduce this error in my application. I re-tested the sample project afterwards, with the same changes, and get a slightly difference result - the list view no longer freezes after returning from the secondary page and is scrollable, but tapping list items does not open the item details page until suspending and re-activating the app. Opening the secondary page still works, though, so no total freezing anymore.

[saheljalal]

It would be great to have this fixed 🙏 as I'm trying to learn NS and online courses seem to be broken as well if they were recorded prior to this breaking. Not great for encouraging adoption.

[AndreasDegenhart]

I am on NS 6.5.1 and have the same issues on android. ListView Freezes after back navigation :-( ios works perfect!

[vietlongn]

I'm on NS 6.7.4 with nativescript-dev-webpack@1.5.1 and the issue still there :( My ScrollView is freezed but Items are still clickable though. I'm also noticed that my ScrollView did scroll (after switch to another tab and switch back).

[jmarrr]

this issue still occurs to me on NS 6, any work around when using nested outlets?

[Log3n]

Any news on this issue? It is preventing us from updating the core modules for 8 months now. I just tested it with the @next version 6.6 and it is still not fixed.

[A-Venkatesh]

@NickIliev Please help.

[karthick-in]

Hey @NickIliev Do you guys have any workaround for this issue?

[tujlaky]

I am having the same issue on android with tns-core-modules@6.5.13

[ChrisSchneiider]

so it would not be recommended, but I have the same problem and have tried several frustrating alternatives. more, if you switch screens seconds before browsing and return to the main screen again. it will not be frozen. ex:

is at index "0", you click to navigate to the next page. at that point, you need to change the index from 0 to another before entering navigation. And when you go back to the previous page, you redo the process again by going back to index 0.

what happens is that: when you change the tab and go back to it again, it unlocks. "Work around"

[brookesb91]

Can confirm I am still having the exact same issues.

My routing is set up as such (some names changed)

[
  { path: 'item/:itemId', loadChildren: () => import('@libs/item').then(i => i.ItemModule) },
  { path: '', redirectTo: '/index/(home:home/index//user:user/index)', pathMatch: 'full' },
  {
    path: 'index',
    component: TabsComponent,
    children: [
      { path: '', outlet: 'home', component: NSEmptyOutletComponent, children: [/** child routes **/] },
      { path: '', outlet: 'user', component: NSEmptyOutletComponent, children: [/** child routes **/] }
    ]
  }
]

App component looks like this

<GridLayout>
  <page-router-outlet></page-router-outlet>
</GridLayout>

Tabs component looks like this

<BottomNavigation>
  <TabStrip>
    <TabStripItem iconSource="~/assets/icons/home-icon.png"></TabStripItem>
    <TabStripItem iconSource="~/assets/icons/user-icon.png"></TabStripItem>
  </TabStrip>

  <TabContentItem>
    <StackLayout><router-outlet name="home"></router-outlet></StackLayout>
  </TabContentItem>
  <TabContentItem>
    <StackLayout><router-outlet name="user"></router-outlet></StackLayout>
</BottomNavigation>

• Navigating to items/:itemId from the Home view of the home outlet works as expected.
• Navigating back via RouterExtensions or the Android back button causes the previous screen to appear but images are missing and will not scroll.
• When presented with the unresponsive screen, links can actually be tapped again and navigation happens as normal.
• Navigating back a second time fixes the previous view.
• This happens consistently on every other navigation FROM the items view.

[Log3n]

Did anyone have success with tns-core-modules 6.5.25? https://github.com/NativeScript/NativeScript/pull/9160 seems to be related to this issue.

[Pandishpan]

On a quick test looks like it's fixed!

Can you please confirm @Log3n

{ "@angular/animations": "8.2.14", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/forms": "8.2.14", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14", "@nativescript/angular": "8.21.0", "@nativescript/core": "6.5.0", "@nativescript/theme": "2.3.3", "@progress-nativechat/nativescript-nativechat": "3.0.0", "kinvey-nativescript-sdk": "4.2.5", "nativescript-accelerometer": "3.0.0", "nativescript-angular": "8.21.0", "nativescript-background-http": "4.2.1", "nativescript-camera": "4.5.0", "nativescript-geolocation": "5.1.0", "nativescript-image": "3.0.1", "nativescript-imagepicker": "7.1.0", "nativescript-intl": "3.0.0", "nativescript-iqkeyboardmanager": "1.5.1", "nativescript-social-share": "1.6.0", "nativescript-theme-core": "1.0.6", "nativescript-ui-autocomplete": "6.0.1", "nativescript-ui-calendar": "6.1.0", "nativescript-ui-chart": "7.1.1", "nativescript-ui-dataform": "6.0.0", "nativescript-ui-gauge": "6.0.0", "nativescript-ui-listview": "8.0.1", "nativescript-ui-sidedrawer": "8.0.0", "nativescript-vue": "2.5.0", "react": "16.13.0", "react-hot-loader": "4.12.20", "react-nativescript": "0.18.0", "reflect-metadata": "0.1.13", "rxjs": "6.5.4", "rxjs-compat": "6.5.4", "svelte": "3.20.1", "svelte-native": "0.8.1", "tns-core-modules": "6.5.0", "zone.js": "0.10.2" }

[DevZatokio]

notification (freeze) /**

• Developer back bottom */ const bottom = app.getRootView().getViewById('bottomNavigation'); bottom.selectedIndex = 0;

  setTimeout(() =>{ this._routerExtensions.navigate( [ { outlets: { homeTab: ['home', 'notification'], }, }, ], { clearHistory: true, transition: { name: 'sideRight', }, }, ); },200)

[chris-praxis]

This is still an issue for me--requires an ugly workaround. Is anybody working on this? tns 6.8.1-rc.1 tns-android 6.5.3 tns-core-modules 6.5.27