How to fix android ui performance

user_568352 0
Viewed 2624

I'm getting:

Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.

My UI performance is very crappy on Android. It seems pretty smooth on iOS. I'm trying to figure out what could be the issue. This one error crops up for me. I'm running "nativescript-angular": "^8.0.0",

<ScrollView [visibility]="isBusy ? 'collapsed' : 'visible'" #sv>
<GridLayout rows="auto,auto,auto,auto" id="t2" columns="*" class="template_body">
        <GridLayout row="0" col="0" #wv1wrapper>
            <!-- <web-view id="instruction-wv" #wv1></web-view> -->
            <template-text [data]="lessonDetail.instruction" *ngIf="lessonDetail.instruction" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
        <StackLayout row="1" col="0" class="main-img">
            <Image [src]="(lesson$ | async)?.thumbUrl" #imgref [data-image]="(lesson$ | async)?.imageUrl" (tap)="modalImage($event);"></Image>
        </StackLayout>
        <GridLayout row="2" col="0" #wvwrapper>
            <!-- <web-view id="wv" #wv></web-view> -->
            <template-text [data]="lessonDetail.body_text" [version]="version" *ngIf="lessonDetail.body_text" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
    </GridLayout>

This is a template that is pulled into a router-outlet that looks like this in the master template:

<FlexboxLayout class="contentbody" [visibility]="isBusy ? 'hidden' : 'visible'" [data-template]="template_id">
            <Label [text]="error" *ngIf="error"></Label>
            <router-outlet></router-outlet>
    </FlexboxLayout>

Also on that page, I do have a listview inside of a stacklayout.

<StackLayout row="0" >
        <StackLayout class="vocab-notes">
            <Label *ngIf="vocabArray" class="h3 section-title" text="Vocabulary"></Label>
                <ListView [items]="vocabArray" id="vocablistview" (itemTap)="onItemTap($event)" class="list-items">
                    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
                        <GridLayout columns="*" rows="auto,auto" [class.odd]="odd" [class.even]="even" class="vocab-list">
                            <FlexboxLayout col="0" row="0" class="vocab-list-item-layout">
                                <Label [text]='item.label' textWrap="true" [id]="item.id" class="h3 vocab-list-item" (tap)="showVocab($event)"></Label>
                            </FlexboxLayout>
                        </GridLayout>
                    </ng-template>
                </ListView>
        </StackLayout>
nativescript-angular nativescript
1 Answers

I know its late for you but if someone is looking for this in future, so if you are getting below in console on any page you load.

JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.

You just need to give your scrollView a height, try different heights like in my case I need 650

<Page class="main" actionBarHidden="true">
        <StackLayout class="gradient-bg">
            <ScrollView orientation="vertical" height="650"> <!-- Here height is 650 -->
                <StackLayout>
                    <GridLayout rows="50" class="page-header">
                        <Label
                            row="0"
                            class="fa label-back"
                            :text="'fa-arrow-left' | fonticon"
                            v-on:tap="navigateTo('app')"
                        />
                        <Label text="Plot Suggestion" row="0" class="lbl-heading" horizontalAlignment="center" /> 
                        ...
                        ...
user_64514780
Related