Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incorrect Image top/bottom alignment xMidYMin/xMidYMax between same iOS/Android SVG

See original GitHub issue

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!

Issue Analytics

State:
Created 4 years ago
Comments:18

Top GitHub Comments

2reactions

msandcommented, Oct 7, 2019

at least works fine for me locally

0reactions

msandcommented, Oct 19, 2019

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Top Results From Across the Web

Incorrect Image top/bottom alignment xMidYMin/xMidYMax ...

Looks like Y axis is incorrect on one of the platforms. ... Image top/bottom alignment xMidYMin/xMidYMax between same iOS/Android SVG #1138.

Add multi-density vector graphics - Android Developers

The image appears in the Vector Drawable Preview. If the SVG or PSD file contains unsupported features, an error appears at the bottom...

Off-center rendering of inline SVG on iOS Safari - Stack Overflow

I'm using hardcoded dividable-by-2 pixel values everywhere. Plus, the original codepen works. Bottom line: between the working codepen and my ...

Auto Layout Guide: Working with Constraints in Interface Builder

Interface Builder provides four Auto Layout tools in the bottom-right corner of the Editor window. These are the Stack, Align, Pin, and Resolve ......

Align SVG Icons to Text and Say Goodbye to Font Icons

svg -icon handler class to hold the size and be relative positioned so that I can absolute position the SVG inside of it....