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

[oleksandr-dziuban]

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!

[msand]

Can you make a complete reproduction?

[oleksandr-dziuban]

Can you make a complete reproduction?

In my app I have dynamic code for images, a lot of code is needed to paste here.
But I will try to prepare small reproduction here, 5 min

[oleksandr-dziuban]

@msand Done, please check

import React from 'react';
import { View } from 'react-native';
import Svg, { G, Image, Rect } from 'react-native-svg';

const App = () => {
  return (
    <View style={{ flex: 1, backgroundColor: 'orange' }}>
      <Svg width="100%" height="600" viewBox="0 0 400 600" style={{ backgroundColor: 'green' }}>
        <G>
          <Rect
            x="0"
            y="100"
            width="120"
            height="400"
            stroke="blue"
            fill="transparent"
          />
          <Image
            x="0"
            y="100"
            width="120"
            height="400"
            href={{ uri: 'https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg' }}
            preserveAspectRatio="xMidYMin meet" />
          <Rect
            x="200"
            y="100"
            width="120"
            height="400"
            stroke="blue"
            fill="transparent"
          />
          <Image
            x="200"
            y="100"
            width="120"
            height="400"
            href={{ uri: 'https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg' }}
            preserveAspectRatio="xMidYMax meet" />
        </G>
      </Svg>
    </View>
  );
};

export default App;

[oleksandr-dziuban]

Updated with Rectangles for better visibility

[msand]

I'm getting the same output on ios, android and web

[oleksandr-dziuban]

I'm getting the same output on ios, android and web

Which library version do you use?
I use 9.9.5

[msand]

Actually, ios seems to have opposite, this is the develop branch / latest version

[oleksandr-dziuban]

Actually, ios seems to have opposite, this is the develop branch / latest version

on react-native-svg@9.9.5 I see that iOS has incorrect top/bottom alignment. Looks like YMax and YMin are opposite to each other, Android and Web works fine.

[msand]

@oleksandr-dziuban can you try the latest commit from the develop branch? c69e9e2

[oleksandr-dziuban]

@msand Thank you for this change, but I can try only tomorrow, is it possible to just check it on my reproduction example?

[oleksandr-dziuban]

@msand if it works correctly there it will work fine in production project too

[msand]

at least works fine for me locally

[oleksandr-dziuban]

You could deploy new version then, in your commit I see -1 * <y axis value> - it is definitely what I saw on iOS: Y Axis === - Y Axis

[oleksandr-dziuban]

Thanks a lot for your help @msand !

[oleksandr-dziuban]

@msand I have checked you commit as npm dependency, but it looks the same, maybe it doesn't install your version correctly with git+https://github.com/react-native-community/react-native-svg.git#c69e9e2

Could you please deploy new version to npm?

[msand]

Hmm, interesting, did you try cleaning the build and rebuilding?
There's still some work remaining in the develop branch, or at least I know of some bugs / spec conformance issues in new functionality.

[oleksandr-dziuban]

@msand Yes, I tried, anyway problem in package installation process, at the end it throws error, because develop branch contains some post install scripts which are failing on my machine.

No worries, it is not urgent, I applied a small hotfix in my app to invert Y axis for iOS. Let's publish npm package when you finish all your required work.

Thanks a lot for your help

[msand]

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀