React-native: [Android] Image resizeMode repeat not working

[balthazar]

Environment

Binaries:
  Node: 11.3.0 - /usr/local/bin/node
  Yarn: 1.7.0 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
  react: 16.6.1 => 16.6.1  (also tested using 16.6.3)
  react-native: 0.57.7 => 0.57.7 (also tested using 0.57.5)
npmGlobalPackages:
  react-native-cli: 2.0.1
SDKs:
  iOS SDK:
    Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
  Android SDK:
    API Levels: 25, 26, 27, 28
    Build Tools: 26.0.3, 27.0.3, 28.0.2
Android
  Version 8.1.0
  Model Pixel 2

Description

Since PR https://github.com/facebook/react-native/pull/17404, Android should now support the repeat resize mode. Although working fine on iOS, it doesn't seem to fully repeat horizontally on my physical Android phone, but works on the emulator.

Reproducible Demo

1. Create an <Image>
2. Set its resizeMode prop to repeat

Created a test repository you can find here. Only stuff is in the App.js.

Screenshots

On the iOs simulator it works:

On the Android emulator it works too:

But on my physical Android device:

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[balthazar]

Pinging @motiz88 for visibility

[motiz88]

Huh. Thanks for pinging me @balthazar!

Since the image is repeating but at the "wrong" size and without filling its container, my bet is on a bug related to pixel density. It'll be some time before I can look at this myself; would you mind testing on emulated devices with different DPI values and posting the screenshots here? If I'm right, you should be able to replicate the broken result if you emulate the same display that your physical device has.

[balthazar]

Thanks for the reply!

Weird, it seems to be working using a Pixel 2 emulator with both 1080x1920 (420dpi) and 1440x2880 (560dpi) resolutions on Android API 28. I also tried the 420dpi using Oreo API 27 which matches my physical device specs and it works too.. So I don't really know what's wrong and it's probably going to be a pain to debug, unless I mail you my device? 😄

[motiz88]

I think I can get my hands on a Pixel 2 to try and repro this. Would you do me a big favour and send an apk my way? Just to speed things up.

[balthazar]

Actually while building the apk, I relaunched the bug demo app on my device and it worked.. My main app I'm working on still displays the bug though, I reinstalled all deps, cleaned the cache, re-installed the app, rebooted..

It's probably a combination of the things I'm doing (using Animated.Image with a translationX, a different image that is stretched longer..) and I haven't managed to isolate the issue just yet, I'll let you know when I do but first I should stop trying to pull my hair out

[motiz88]

I see! Yes, I can imagine how animating and particularly resizing the image component might confuse the current implementation. Let me know if you do isolate it and I'll try to investigate from there.

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[papmodern]

I have the same issue on [email protected]

[AndreyPatseiko]

This issue still not fixed in RN 0.59.9.

[Maclay74]

Still not fixed, terrible.

[Maickonn]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

Hello, I have same issue. Here are the my environment:

---

System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-2435M CPU @ 2.40GHz
Memory: 18.92 MB / 4.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.11.1 - /usr/local/bin/node
Yarn: 1.19.0 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
npmGlobalPackages:
react-native-cli: 2.0.1