react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Image component in Android has horizontal lines on either side of it

Open Lump01 opened this issue 2 years ago • 1 comments

Description

I am using an <Image resizeMode={‘contain’} /> And it works as expected on iOS but on Android it has these weird horizontal blurred lines on either side of it where the empty space should be.

Version

0.63.3

Output of npx react-native info

System: OS: macOS 13.0 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 516.28 MB / 16.00 GB Shell: 3.2.57 - /bin/sh Binaries: Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node Yarn: Not Found npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm Watchman: 2022.11.28.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9123335 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 11.0.17 - /usr/bin/javac Python: Not Found npmPackages: @react-native-community/cli: ^4.13.0 => 4.14.0 react: 16.13.1 => 16.13.1 react-native: 0.63.3 => 0.63.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

  1. Create image component styled width and height at 100% with the resizeMode as contain.
  2. Choose photo from user’s gallery (or take a picture)
  3. Assign filepath to source={{uri: filepath}}
  4. View blurry lines on either side for Android and view empty space on either side for iOS.

Snack, code example, screenshot, or link to a repository

<Image style={{width: ‘100%’, height: ‘100%’}} source={{uri: filepath.replace(‘file://‘, ‘’}} resizeMode={‘contain’} />

85CC1701-0203-475F-9EF2-2C5524DE7199 EAE4F5EC-CE1B-433F-8560-4F0BF229AC7A

Lump01 avatar Jan 12 '23 15:01 Lump01

Just did some testing and found this was when I added a borderRadius style to my Image. It seems styles having to do with border create similar errors.

Lump01 avatar Jan 12 '23 15:01 Lump01

From what I gathered after some investigation, this is a limitation of the library used by react native, fresco - https://frescolib.org/docs/rounded-corners-and-circles.html I think the next version has a fix (mentioned here), but a year has already passed

BeeMargarida avatar Feb 10 '23 22:02 BeeMargarida

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Aug 10 '23 05:08 github-actions[bot]

This issue was closed because it has been stalled for 7 days with no activity.

github-actions[bot] avatar Aug 19 '23 05:08 github-actions[bot]

any update on this?? I'm still facing this issue with RN 71