Repository navigation
[Android] Image resizeMode repeat not working #22460
Description
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 #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
- Create an
<Image> - Set its
resizeModeprop torepeat
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:
Activity
react-native-bot commentedon Nov 30, 2018
Can you run
react-native infoand 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 commentedon Nov 30, 2018
Pinging @motiz88 for visibility
motiz88 commentedon Nov 30, 2018
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 commentedon Nov 30, 2018
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 commentedon Nov 30, 2018
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 commentedon Nov 30, 2018
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.Imagewith atranslationX, 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 outmotiz88 commentedon Nov 30, 2018
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 commentedon Dec 8, 2018
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 commentedon Mar 12, 2019
I have the same issue on react-native@0.57.7
AndreyPatseiko commentedon Jul 10, 2019
This issue still not fixed in RN 0.59.9.
Maclay74 commentedon Aug 12, 2019
Still not fixed, terrible.
maickonn commentedon Oct 11, 2019
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