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>

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 ?

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

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)

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.

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.

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

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.

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