Applying pattern image to Path

[brunof17]

Bug

Hi, I was using this package to show a screen that is made with SVGs. I got a path that I want to fill with a image, and I would like the image to be centered.

A example image:

The code for the pattern and the Path that I want to fill are down here. <Svg id="prefix__Layer_1" data-name="Layer 1" viewBox="0 0 1920 1080" > <Defs> <Pattern id={'idimage'} width="100%" height="100%" viewBox="0 0 320 180" x="0" y="0" > <Image href={{ uri: 'https://img.youtube.com/vi/KBfu3LirIQg/mqdefault.jpg' }} preserveAspectRatio="xMinyMax meet" width="320" height="180" /> </Pattern> </Defs> <Path fill="#486F79" d="M1618.6 133.1v111.8c0 14.6-12.7 26.5-28.2 26.5h-140c-34.1 41.6-76.9 40.7-76.9 40.7 18.3-7.2 28.4-25.8 33.7-40.7H1367c-15.6 0-28.2-11.9-28.2-26.5V133.1c0-14.6 12.7-26.5 28.2-26.5h223.4c15.5 0 28.1 11.8 28.2 26.5z" /> <Path fill="url(#idimage)" d="M1370.7 262.4h216c13 0 23.7-10.7 23.7-23.7V138.1c0-13-10.7-23.7-23.7-23.7h-216c-13 0-23.7 10.7-23.7 23.7v100.5c0 13.1 10.7 23.8 23.7 23.8z" /> </Svg>

The output from this is the following:

I then tested this on the web, trying to figure out if I was doing anything wrong with the SVGs. The HTML code is as follows

<svg version="1.1" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> <defs> <pattern id="imageid" viewBox="0 0 320 180" x="0" width="1" height="1" y="0" > <image width="320" height="180" xlink:href="https://img.youtube.com/vi/KBfu3LirIQg/mqdefault.jpg"/> </pattern> </defs> <g> <path fill="#486F79" d="M191.9,669.6V557.8c0-14.6,12.7-26.5,28.2-26.5h140c34.1-41.6,76.9-40.7,76.9-40.7 c-18.3,7.2-28.4,25.8-33.7,40.7h40.2c15.6,0,28.2,11.9,28.2,26.5v111.8c0,14.6-12.7,26.5-28.2,26.5H220.1 C204.6,696.1,192,684.3,191.9,669.6z"/> <path fill="url(#imageid)" d="M439.7,540.3h-216c-13,0-23.7,10.7-23.7,23.7v100.5c0,13,10.7,23.7,23.7,23.7h216c13,0,23.7-10.7,23.7-23.7 V564C463.5,551,452.8,540.3,439.7,540.3z"/> </g> <g> <path class="st212" d="M693.8,967.9V856.1c0-14.6,12.7-26.5,28.2-26.5h140c34.1-41.6,76.9-40.7,76.9-40.7 c-18.3,7.2-28.4,25.8-33.7,40.7h40.2c15.6,0,28.2,11.9,28.2,26.5v111.8c0,14.6-12.7,26.5-28.2,26.5H722 C706.5,994.3,693.9,982.5,693.8,967.9z"/> <path fill="url(#imageid)" d="M941.7,838.6h-216c-13,0-23.7,10.7-23.7,23.7v100.5c0,13,10.7,23.7,23.7,23.7h216c13,0,23.7-10.7,23.7-23.7 V862.3C965.4,849.2,954.8,838.6,941.7,838.6z"/> </g> </svg>

This produces the expected behaviour as seen in the image below:

We then tried to import the SVG directly on the code, and the result was the same as the one from the components.

I am now wondering if this is any bug with the package itself or if we are doing anything wrong. Thanks in advance

[EDIT] It was only tested on Android Platforms.

Environment info

System: OS: macOS Mojave 10.14.4 CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz Memory: 29.52 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 12.16.1 npm: 6.13.4 Watchman: 4.9.0 Managers: CocoaPods: 1.9.0 SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 28, 30 Build Tools: 28.0.3, 30.0.1 System Images: android-22 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-28 | Android TV Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6514223 Xcode: 11.3.1/11C504 Languages: Java: Not Found Python: 2.7.10 npmPackages: @react-native-community/cli: Not Found react: 16.9.0 => 16.9.0 react-native: ^0.62.0 => 0.62.2 npmGlobalPackages: *react-native*: Not Found