SVG renders completely different than Image

[thijssmudde]

Reproduction repo:

https://github.com/fullhdpixel/stopwatch_RN/tree/svg-problem

iOS Emulator SVG from 'react-native-remote-svg'

Android phone SVG from 'react-native-remote-svg'

iOS Emulator Image from 'react-native'

Android phone Image is same as iOS Emulator Image

[seekshiva]

Hi @fullhdpixel,

Thanks for the reproduction repo.

React native requires you to define {width, height} of an image according to the image's aspect ratio. If you take a 100x100 image and give it style={{ width: 100, height: 50 }}, the image won't be scaled and displayed like in web. You will merely see the center part of the image. This is true for both images loaded locally and via remote uri. Demo to prove this: https://snack.expo.io/HJAz9h6dz

---

In your code, you had specified the height of the image to be 55% of screen height and width to be 100% of screen width. Aspect ratio of mobile devices would vary, and the width/height that get set would not match the aspect ratio of the image.

I would suggest you to use px values like this rather than %

In the above code sets image width to device width, and calculates image height dynamically.

The above code got it working in different screen sizes.

[thijssmudde]

Thanks @seekshiva, it works!