react-native-svg: Incorrect Image top/bottom alignment xMidYMin/xMidYMax between same iOS/Android SVG

Bug

If preserveAspectRatio used to align image to top/bottom on iOS and Android we can see diametrically opposite alignment. Looks like Y axis is incorrect on one of the platforms.

Environment info

React native info output:

 System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 23.68 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.3
      System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: 2.9.0 => 2.9.0 
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native: 0.61.2 => 0.61.2 

Library version: 9.9.5

Steps To Reproduce

<Image 
  x="0" y="100" width="50 height="150" source={ { uri: ... } } 
  preserveAspectRatio="xMidYMin meet" />
<Image
  x="200" y="100" width="50" height="150" source={ { uri: ... } }
  preserveAspectRatio="xMidYMax meet" />

Guys, please check, thanks a lot!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 18

Commits related to this issue

Most upvoted comments

at least works fine for me locally