Pager 13.0.2+: iOS layout issues

[felixkrautschuk]

Right now we use Pager plugin version 13.0.1 in our app without any problems on Android and iOS. When upgrading to 13.0.2 (or even latest 14.0.1), we see some iOS layout issues when swiping between the pages.

https://user-images.githubusercontent.com/6443021/189687348-ce4dfdf4-0b1b-4176-9792-b04d471cf1ec.mov

So the content of an item within the pager suddenly disappears.

This is the pager layout:

<pager:Pager items="{{ items }}" className="pager">
    <pager:Pager.itemTemplate>
         <GridLayout rows="*" className="pager-item-outer"> <!-- margin 10 5 10 5 is causing the issue !!! -->
             <StackLayout row="0" padding="15">
                 <Label text="{{ title }}" maxLines="2" className="pager-item-title"/>
                 <Label text="{{ subtitle }}" maxLines="2" className="pager-item-subtitle"/>
             </StackLayout>
         </GridLayout>
     </pager:Pager.itemTemplate>
</pager:Pager>

Somehow, the margin applied in css class "pager-item-outer" is causing that issue, however this is needes as the box-shadow would look weird without that margin on Android and iOS. The margin was no problem when using 13.0.1 plugin version.

Demo app to reproduce: ns-ios-pager-issue.zip

[triniwiz]

Thanks, I've been working on an update for the pager the next major release since I rewrote it on both platforms

[felixkrautschuk]

Are there any updates on this?

[felixkrautschuk]

Omg...... wrapping the whole pager item content into another GridLayout fixes the issue.

<pager:Pager items="{{ items }}" className="pager">
    <pager:Pager.itemTemplate>
         <GridLayout>
             <GridLayout rows="*" className="pager-item-outer">
                 <StackLayout row="0" padding="15">
                     <Label text="{{ title }}" maxLines="2" className="pager-item-title"/>
                     <Label text="{{ subtitle }}" maxLines="2" className="pager-item-subtitle"/>
                 </StackLayout>
             </GridLayout>
         </GridLayout>
     </pager:Pager.itemTemplate>
</pager:Pager>

I tried a lot of different things and I was very sure that I tried this too... :D

[triniwiz]

@felixkrautschuk There is 15 alpha try it and lmk

[felixkrautschuk]

@triniwiz thanks for your feedback. I checked 15.0.0-alpha.4 but I still need to wrap the content into a GridLayout, otherwise the issue still exists.