iOS does not respect the aspect ratio

[alx-developer]

I started using this add-on a few weeks ago and it seems to work fine on Android but on iOS it doesn't respect the image height and makes it warp, could you help me?

[SergeyMell]

Sure, I'll try to help you with this.

1. Are you talking about nativescript-svg or nativescript-colorwheel plugin?
2. Could you provide a small example of your code so I could have a look?

[alx-developer]

Hello, thank you very much, I am referring to nativescript-svg

In the first image you can see that I assigned 100% of the image size and everything seems to be fine.

IIn this second image I reduce the width and height to 50%, but the height does not seem to decrease, this is where the image starts to distort.

Thank you!

[SergeyMell]

Unfortunately, for now, svg instances from the plugin doesn't work with percentage dimensions correctly. I will mark this issue as a feature and will try to implement it asap. However, the only solution, for now, is to use dimensions in pixels.

As a workaround, if you need for example parent sizes, you can implement it as follows

<StackLayout>
<SVGImage src="..." (loaded)="onSvgLoad($event)">
</StackLayout>

onSvgLoad(args) {
   const svg = args.object as View;
   const parent = args.object.parent as View;
   setTimeout(() => {
      const height = parent.getActualSize().height;
      const width = parent.getActualSize().width;
      svg.width = 0.5 * width;
      svg.height = 0.5 * height;
   })
}

or any other similar way where you get the specific size of the container