Nativescript: BottomNavigation breaks tab content on navigating to another page and back again

[m-abs]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.3.2
• Cross-platform modules: 6.3.2
• Android Runtime: 6.3.1
• iOS Runtime: 6.3.0
• Plugin(s):
  
  
  
  • nativescript-angular: 8.20.4
  
  

Describe the bug

Navigation to another page from a BottomNavigation and back again breaks the content of the current tab.
ListView can no longer be scrolled, items cannot be tapped etc.

To Reproduce

1. Create a BottomNavigation, with a ListView on one of the tabs.
2. Add a page-route to another page (full page, not tab content).
3. Navigate to the other page
4. Go back.
5. The ListView can no longer be scrolled and the items cannot be tapped.
6. Switch to another tab and back again.
7. The ListView now can be scrolled again. (If you tapped on an item, that action is triggered)

Expected behavior
To be able to interact with the content of the tab.

Sample project

I've created a demo project in my ns-debugging repository:

https://github.com/m-abs/ns-debugging/tree/master/bottomnavigation-break-on-navigation

Additional context

I've tested on Android 10, both hardware device (Oneplus 7T pro) and emulator.
Might be related to the fix for #8104

[m-abs]

On navigating back to the BottomNavigation the first tab's frame is attached and immediately detached again, so frame._attachedToWindow is false.

This is the View tree path:
BottomNavigation(7) > children[0] = Frame(19) > children[0] = Page(38) > children[0] = ProxyViewContainer(41) > children[0] = Frame(42)

[ridcully]

I am having the same Issue. It doesn't matter if it is a ListView, RadListView or a ScrollView inside the TabView. Whenever you open a new Page and press the back Button it does not render the TabView correctly.

I get this behaviour with NativeScript 6.3.1 and also with NativeScript 6.4.0.

When the view isn't rendered correct, I still can load any other Page by clicking on the ListView, and when I go back again, the TabView is rendered correctly again. Same when switching Tabs.

[timdoege]

Just to chime in: Upgrading my tab-based app from NativeScript 6.1 to 6.3.1 or 6.4 results in the same issue - after visting a new page and going back to the tabs view images are not loaded, list views won't scroll etc. Changing the selected tab and going back again loads the view correctly (minimizing and restoring the app, also).

[deivdev]

Someone found's a solution or workaround?
Or we need to wait for a framework fix?
I've been stuck for few days without find a good solution/workaround.

[m-abs]

@deivdev
Unfortunately no. I spend a long time trying to work around this problem, in the end we choose not to use real-tabs in our application.

[deivdev]

Thanks @m-abs , i develop a fake tab bottom bar, with a frame on top.

<GridLayout rows="*, 50" >
    <Frame id="tmpl_frame" defaultPage="ui/home/home-page"/>

    <GridLayout row="1" columns="*,*,*,*,*" id="tab_menu">
      <StackLayout col="0" tap="tmplTapHome"    class="{{active == 0 ? 'tab_active' : 'tab'}}">
        <Label text="&#xf103;" class="font_icon tab_image" />
        <Label text="{{i18n('Home')}}" class="tab_label"/>
      </StackLayout>
      <StackLayout col="1" tap="tmplTapNew"     class="{{active == 1 ? 'tab_active' : 'tab'}}">
        <Label text="&#xf105;" class="font_icon tab_image" />
        <Label text="YouBook" class="tab_label"/>
      </StackLayout>
      <StackLayout col="2" tap="tmplTapIout"    class="{{active == 2 ? 'tab_active' : 'tab'}}">
        <Label text="&#xf104;" class="font_icon tab_image" />
        <Label text="{{i18n('Movements')}}" class="tab_label"/>
      </StackLayout>
      <StackLayout col="3" tap="tmplTapTabla"   class="{{active == 3 ? 'tab_active' : 'tab'}}">
        <Label text="&#xf10a;" class="font_icon tab_image" />
        <Label text="{{i18n('Tabla')}}" class="tab_label"/>
      </StackLayout>
      <StackLayout col="4" tap="tmplTapPlanner" class="{{active == 4 ? 'tab_active' : 'tab'}}">
        <Label text="&#xf106;" class="font_icon tab_image" />
        <Label text="Planner" class="tab_label"/>
      </StackLayout>
    </GridLayout>
</GridLayout>

Now i got another bug:
when i suspend the app and resume i got this error, caused by the frame 'tmpl_frame'

java.lang.RuntimeException: Unable to resume activity {net.wubook.zak/com.tns.NativeScriptActivity}: java.lang.IllegalArgumentException: No view found for id 0x3 (unknown) for fragment fragment3[2]<t(22)@ui/home/home-page.xml:1:1;>

Did you find a better solution or did you solve in some way this bug?

[m-abs]

@deivdev
Our app is a nativescript-angular app.

We don't use frames for our fake tab-view.
We maintain our own history per tab in a special service and switch out the content with *ngIf, when the user switches tab.

I'm not sure I'd recommend our solution, it is a very old solution from when we couldn't get Tab buttons at the bottom of the screen.

[timdoege]

Digging deeper, it seems like this might be related to this NS Angular-issue: https://github.com/NativeScript/nativescript-angular/issues/2075 i

[timdoege]

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

[farfromrefug]

@m-abs I think it is related to fragments being destroyed on navigation forward. I created a PR for (which I use in all my apps now) to handle it the way all android apps do it. (Fragment add/remove instead of replace). I don't have the link right now as I am on my phones. You can look in opened PRs