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

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

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!

@gmavritsakis

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.

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

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

@Pandishpan

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

@alqabali

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

@alqabali

@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.

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.

@aftoncreative

@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

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

@NickIliev

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

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.

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.

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

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).

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

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.

@NickIliev

@NickIliev
Please help.

@NickIliev

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

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

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"

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.

Did anyone have success with tns-core-modules 6.5.25? NativeScript/NativeScript#9160 seems to be related to this issue.

@Log3n

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"
}

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)

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

Navigation Menu

Repository navigation

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

6 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

gmavritsakis commented on Nov 27, 2019

Pandishpan commented on Nov 27, 2019

aftoncreative commented on Feb 24, 2020

manuelruelas commented on Feb 28, 2020

alqabali commented on Mar 5, 2020

manuelruelas commented on Mar 5, 2020

Pandishpan commented on Mar 6, 2020

aftoncreative commented on Mar 6, 2020

Pandishpan commented on Mar 9, 2020

timdoege commented on Mar 18, 2020

alqabali commented on Mar 20, 2020

alqabali commented on Mar 26, 2020

6 remaining items

timdoege commented on Apr 23, 2020

saheljalal commented on May 2, 2020

AndreasDegenhart commented on May 9, 2020

vietlongn commented on Jun 3, 2020

jmarrr commented on Jun 16, 2020

Log3n commented on Jul 13, 2020

A-Venkatesh commented on Jul 24, 2020

karthick-in commented on Aug 6, 2020

tujlaky commented on Aug 13, 2020

ChrisSchneiider commented on Sep 7, 2020

brookesb91 commented on Sep 9, 2020

Log3n commented on Mar 2, 2021

Pandishpan commented on Mar 3, 2021

DevZatokio commented on Apr 22, 2021

chris-praxis commented on May 6, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions