Q: Nativescript Tabview first tabs empty on Android

Question

I'm kinda stuck here at a point, which I thought could be simply solved. Pretty new to Nativescript + Angular.

I've taken the Tabview Code from the Nativescript docs and added an ng container, to show a set of data which I provide through a service (mainly a single http request to a json) and initialise it in ngOnInit(). With the following code, the data I get is shown correctly in the TabTitle (*tabItem), but right in the next line the problem starts.

On Android my first two tabs are empty. Only when swiping to the forth tab and than backwards to the first, my two Labels appear. (When swiping to the third and backwards again only the first appears.) On iOS this problem doesn't happen. Any idea how to reload the first tab on Android or why this is happening at all? Any help is appreciated, thanks!

Here's my component.html

<ActionBar class="action-bar">
    <Label class="action-bar-title" [text]="timetableName"></Label>
</ActionBar>

<TabView id="tabViewContainer">
    <ng-container *ngFor="let tab of tabTitles; let i = index">
        <StackLayout *tabItem="{title: tab + ' Tab'}">
            <StackLayout>
                <Label [text]="tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
            </StackLayout>
        </StackLayout>
    </ng-container>
</TabView>

I've attached a short gif, which shows the missing and appearing label.

Here's the reproduced issue on Nativescript Playground.

I'm unable to reproduce the issue on Playground, can you give it a try and make necessary changes so we can see the issue. — Manoj
@Manoj thank you! I reproduced the issue for you on your playground. I will attach the example on the Mainpost for better overview. link — ishihara

Manoj Manoj · Accepted Answer · 2018-11-27T16:39:56

Android caches the tabs based on your androidOffscreenTabLimit which defaults to 1 and you can't set this to 0, that's a limitation. An easy fix could be not initiating your TabView until your data is ready, with a ngIf.

<ActionBar class="action-bar">
    <Label class="action-bar-title" [text]="timetableName"></Label>
</ActionBar>

<TabView id="tabViewContainer" *ngIf="tabTitles.length">
    <ng-container *ngFor="let tab of tabTitles; let i = index">
        <StackLayout *tabItem="{title: tab + ' Tab'}">
            <Label [text]="tab" textWrap="true" class="m-15 h2 text-left"
                color="blue"></Label>
        </StackLayout>
    </ng-container>
</TabView>

Q: Nativescript Tabview first tabs empty on Android

1 Answers