[iOS only] Child Layouts of items in ListView are displayed on top of each other when height vary

[tsonevn]

From @mmeven on November 21, 2018 15:18

Environment

• CLI: 5.0.0-2018-10-15-12485
• Cross-platform modules: 5.2.0-2018-11-19-184627-02
• Android Runtime: 5.0.0
• iOS Runtime: 5.1.0-2018-11-19-091441-01

Describe the bug
The issue is caused when a child layout of an ng-template can have a different height depending of the item displayed. It results in layouts being displayed on top of each other for items not at the top of the list (not displayed before scrolling), even though the parent layout has set its size to be able to contain every child layout.

To Reproduce

Create a component containing a ListView. The template for the items must be made of a parent Layout, and several child Layouts (at least 2) with one having a varying height, with a Label that is not displayed every time for exemple.

Expected behavior
The child Layouts should be displayed like this :

What happens
But this is what happens :

Sample project
https://github.com/mmeven/nativescript-listview-issue

Additional context

I did not manage to reproduce this issue with versions before 5.0.0, with tns-core-modules 4.2.1 and tns-ios 4.2.0 it works just fine. The "expected behavior" screenshot was done using those previous versions.

Copied from original issue: NativeScript/NativeScript#6594

[tsonevn]

Hi @mmeven,

I noticed that you are using FlexBox properties(justifyContent, flexDirection) for the StackLayout. The StackLayout does not support those properties, and I will suggest replacing the StackLayout with FlexboxLayout. For example:

<FlexboxLayout class="1" justifyContent="space-between">
                    <Label [text]="item.name" class="list-group-item"></Label>
                    <Label [text]="item.id" class="list-group-item"></Label>
                </FlexboxLayout>
                <FlexboxLayout class="2" flexDirection="column">
                    <Label [text]="item.role" class="list-group-item"></Label>
                    <Label text="id is odd" *ngIf="item.id%2 == 1"></Label>
                </FlexboxLayout>

Regarding the issue, I tested the the project and was able to recreate an issue with the dynamic sizing of the items. I will mark this as a bug. As a workaround you can replace also the main StackLayout container with FlexboxLayout:

<ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <FlexboxLayout style="border: 2px solid black">
                <FlexboxLayout class="1" justifyContent="space-between">
                    <Label [text]="item.name" class="list-group-item"></Label>
                    <Label [text]="item.id" class="list-group-item"></Label>
                </FlexboxLayout>
                <FlexboxLayout class="2" flexDirection="column">
                    <Label [text]="item.role" class="list-group-item"></Label>
                    <Label text="id is odd" *ngIf="item.id%2 == 1"></Label>
                </FlexboxLayout>
            </FlexboxLayout>
        </ng-template>
    </ListView>

[mmeven]

Thanks for your answer.

Sorry for the inconvenience about the wrong properties, I must have left them while trying to replace the child layouts with Flexboxs.

Thanks for the workaround. I did try to change the main layout to a Flexbox, however it doesn't seem to fix the issue at all, I get the same result. Did it work for you ?

[tsonevn]

Hi @mmeven,
Yes, I tested it on my side and the replacement of the StackLayout with FlexboxLayout workaround the issue. Can you provide some more info about the device, you are using for testing(device type, iOS version)?

Meanwhile, you can try to clear up the project following the below-attached steps and check if the problem persists after the rebuild.

1. delete platforms, node_modules, hooks folders and package-lock.json file
2. run npm i
3. rebuild the project via tns run ios

[mmeven]

Even after cleaning up the project is still observe the issue. By the way, I have added flexDirection="column" to the main FlexboxLayout to keep the same aspect as with the StackLayout.

I am testing on a physical iPhone 6, with iOS version 12.1 (16B92)

[AlessandroFBK]

Have you found any temporary workaround to this issue meanwhile?
I'm facing the same issue on the same {N} cli version (5.0.1), tns-ios 5.0.0 on iOS 12.0.

[mmeven]

Hi @AlessandroFBK ,
For now I'm using tns-core-modules 4.2.1 and tns-ios 4.2.0, until this is resolved. I have no workaround for versions >= 5.0.

[mmeven]

@AlessandroFBK ,

I found an issue on the Nativescript repository (NativeScript/NativeScript#6628) concerning this problem, with a workaround.

If you add iosOverflowSafeArea="false" to every StackLayout in your item template, it seems to behave correctly. It also seems to work with FlexboxLayouts.

The issue is also discussed here #1599 .

[tsonevn]

HI @mmeven,
Can you check if the issue is fixed on your side using the latest tns-core-modules version 5.0.5? You can check out the upgrade instructions here.

[mmeven]

Hi @tsonevn , the issue is still here on my side using tns-core-modules 5.0.5.