Skip to content

BottomNavigation breaks tab content on navigating to another page and back again #8251

New issue
New issue
Closed
#9148
Closed
BottomNavigation breaks tab content on navigating to another page and back again#8251
#9148
Labels
bugroutertabs

Description

@m-abs
m-abs
opened on Jan 15, 2020

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

Activity

  1. m-abs commented on Jan 17, 2020

    @m-abs
    m-abs
    on Jan 17, 2020
    ContributorAuthor

    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)

  2. NickIliev
    added
    tabs
    bug
    router
    on Jan 23, 2020

  3. ridcully commented on Feb 13, 2020

    @ridcully
    ridcully
    on Feb 13, 2020

    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.

  4. timdoege commented on Feb 18, 2020

    @timdoege
    timdoege
    on Feb 18, 2020

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

  5. deivdev commented on Mar 6, 2020

    @deivdev
    deivdev
    on Mar 6, 2020

    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.

  6. m-abs commented on Mar 7, 2020

    @m-abs
    m-abs
    on Mar 7, 2020
    ContributorAuthor

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

  7. deivdev commented on Mar 11, 2020

    @deivdev
    deivdev
    on Mar 11, 2020

    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?

  8. m-abs commented on Mar 11, 2020

    @m-abs
    m-abs
    on Mar 11, 2020
    ContributorAuthor

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

  9. timdoege commented on Mar 16, 2020

    @timdoege
    timdoege
    on Mar 16, 2020

    Digging deeper, it seems like this might be related to this NS Angular-issue: NativeScript/nativescript-angular#2075 i

  10. timdoege commented on Mar 18, 2020

    @timdoege
    timdoege
    on Mar 18, 2020

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

  11. farfromrefug commented on Oct 2, 2020

    @farfromrefug
    farfromrefug
    on Oct 2, 2020
    Collaborator

    @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

  12. NathanWalker
    added a commit that references this issue on Jan 17, 2021

    fix(android): BottomNavigation fragment child already has a parent

    df9015d
  13. NathanWalker
    closed this as completedin #9148on Jan 17, 2021
  14. NathanWalker
    added a commit that references this issue on Jan 17, 2021

    fix(android): BottomNavigation fragment child already has a parent (#…

    4690162
  15. rigor789
    added a commit that references this issue on Jan 20, 2021

    ci: fix npm_install for core on CI (docs) (#9155)

    8a36e79
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugroutertabs

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions