stretch="aspectFill" not working on IOS

[alexonozor]

Which platform(s) does your issue occur on?

• iOS
• emulator or device. What type of device? Both

  Please, provide the following version numbers that your issue occurs with:

  All version in including

Is there any code involved?

<GridLayout class="mx-2" rows="*,auto" columns="*">
  <GridLayout rows="*" columns="*"  row="0" col="0" class="m-0 p-0">
    <NSImg   
    placeholderImageUri='~/assets/ph.png' row="0" columns="0" height="100%" width="100%" fadeDuration="1000"
      stretch="aspectFill" failureImageUri="~/assets/ph.png"   [src]="store?.bannerImage">
    </NSImg>
    <ContentView class="bg-black" opacity="0.2" borderRadius="5" ></ContentView>
    <ng-container *ngIf="!store.isOpen">
      <ContentView class="bg-black" opacity="0.5" borderRadius="5" ></ContentView>
      <Label text="Currently closed" verticalAlignment="center" horizontalAlignment="center" col="0" row="0"
        class="text-center rounded-lg text-lg font-bold text-white" textWrap="true"></Label>
    </ng-container>
    <StackLayout horizontalAlignment="left" class="mt-4" height="38" verticalAlignment="top">
      <offer-label [offers]="store?.offers" [store]="store" [isStore]="true"></offer-label>
    </StackLayout>
  </GridLayout>
  <GridLayout  row="1" col="0" class="py-1  w-full"   rows="auto" columns="*,auto">
    <ContentView row="0" col="0" class="m-0 align-top" >
      <store-card-info [store]="store" type="list"></store-card-info>
    </ContentView>
    <ContentView row="0" col="1" horizontalAlignment="right" class="m-0 align-top" *ngIf="currentUserId"  horizontalAlignment="right">
      <favorite-button [isFavorite]="store.isFavorite" [storeId]="store._id" [userId]="currentUserId"></favorite-button>
    </ContentView>
  </GridLayout>
</GridLayout>

[farfromrefug]

@alexonozor i cant reproduce your issue. The demo vue app works fine with aspectFill. Can you try a simpler example?

[sebj54]

I had this bug in the past, unfortunately, it is not a NSImg bug but a GridLayout one.

@alexonozor Try with a StackLayout with a background color instead of your NSImg, you'll see it does not fill either.

[farfromrefug]

@sebj54 can you share the simplest of examples ?

[sebj54]

I won't have the time to test it this week but definitely try it as soon as I can. If I remember well the problem occurs when imbricating GridLayouts with auto height.

[farfromrefug]

@sebj54 @alexonozor i just pushed a new version which fixes auto measurement edge cases. Maybe it will fix it for you

[alexonozor]

I tried it out with the new version and still experienced the same issue on iOS I had a background colour and it fits in nicely. Meanwhile, I have been hacking it with iso:stretch="fit" which doesn't look nice on ios because the image has to lose it aspect ratio on Android stretch="aspectFill"

<NSImg   
    placeholderImageUri='~/assets/ph.png' row="0" columns="0" height="100%" width="100%" fadeDuration="1000"
      stretch="aspectFill" failureImageUri="~/assets/ph.png"   [src]="store?.bannerImage">
    </NSImg>

Note: It works well when I use the native image component

[farfromrefug]

@alexonozor made a new version yesterday. Did you try latest ? I think i found the real issue.

[alexonozor]

Thanks but I am getting this error now

"@nativescript-community/ui-image": "^4.3.25",

CocoaPods could not find compatible versions for pod "SDWebImage":
  In Podfile:
    SDWebImage (>= 5.18.5.0)

None of your spec sources contain a spec satisfying the dependency: `SDWebImage (>= 5.18.5.0)

[farfromrefug]

You should search on the web. You can do pod repo update

[alexonozor]

It works fine now, thank you for giving us a great plugin back-to-back!