NativeScript ListView items disappear after routing back to BottomNavigation component

Question

In my NativeScript app, there is a BottomNavigation tab:

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsComponent,
        children: [
            {
                path: 'feed',
                loadChildren: '~/app/pages/feed/feed.module#FeedModule',
                component: NSEmptyOutletComponent,
                outlet: 'feedTab'
            },
            {
                path: 'notification',
                loadChildren: '~/app/pages/notification/notification.module#NotificationModule',
                component: NSEmptyOutletComponent,
                outlet: 'notificationTab'
            },
            {
                path: 'create',
                loadChildren: '~/app/pages/create/create.module#CreateModule',
                component: NSEmptyOutletComponent,
                outlet: 'createTab'
            },
            {
                path: 'profile',
                loadChildren: '~/app/pages/profile/profile.module#ProfileModule',
                component: NSEmptyOutletComponent,
                outlet: 'profileTab'
            }
        ]
    }
];

and within one of those child tabs, there is a RadListView of items:

<ActionBar id="profile-action-bar" title="Notifications"></ActionBar>
<GridLayout>
  <RadListView separatorColor="transparent" class="notification-list" [items]="notificationList"
    (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" loadOnDemandMode="Auto"
    (itemTap)="onNotificationTap($event)">
    <!-- (itemTap)="onGoalTap($event)" -->

    <ng-template let-item="item" let-i="index">
      <ns-notification-item [item]=item [position]=i></ns-notification-item>
    </ng-template>

  </RadListView>
</GridLayout>

The list populates as expected when navigating to that tab, but if you navigate to a child component of another tab and then directly back to the BottomNavigation:

child-component:

this.router.navigate([
     '../tabs'
  ]);

all of the items in the ListView that previously loaded have disappeared...items that had not loaded previously will then begin to populate the list however

Did you try passing ActivatedRoute on relativeTo? Can you share a minimal Playground sample where the issue can be reproduced? — Manoj
@Manoj here is a sample playground: play.nativescript.org/?template=play-ng&id=K3w4he&v=5 Whenever you navigate from the listview after the service loads items into the list, then those items will be "lost" and not appear when you navigate back to the listview — WJosh Vetter

Manoj Manoj · Accepted Answer · 2019-12-02T08:23:00

There is a major difference Router Outlet and Page Router Outlet. On web, when you navigate all components on current route is destroyed and new component for the navigated route is rendered.

With mobile apps, you retain your navigation stack, go back to previous page right where you left. For this purpose you use Page Router Outlet, and to handle Page Router Outlet you need RouterExtensions

When you want to go back to previous page in history, you should call back() method on RouterExtensions.

Updated Playground

NativeScript ListView items disappear after routing back to BottomNavigation component

1 Answers