react-native
react-native copied to clipboard
Image component in Android has horizontal lines on either side of it
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
- Create image component styled width and height at 100% with the resizeMode as contain.
- Choose photo from user’s gallery (or take a picture)
- Assign filepath to source={{uri: filepath}}
- 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’} />
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.
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
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.
This issue was closed because it has been stalled for 7 days with no activity.
any update on this?? I'm still facing this issue with RN 71