Adding borderRadius to Image on Android pixelates the image

[tautvilas]

Adding borderRadius to Image on Android pixelates the image. I am attaching example images and source code.

Steps To Reproduce

Without border radius

<Image style={} source={require('path/to/image')} />

With border radius

<Image style={{borderRadius: 8}} source={require('path/to/image')} />

This issue prevents me from displaying beautiful HD images for my customers on android. One workaround that I tried was to use container element with borderRadius and overflow: 'hidden', however that introduces jagged borders.

With container border radius and overflow hidden

<View style={{borderRadius: 8, overflow: 'hidden'}}><Image source={require('path/to/image')} /></View>

React Native version:

System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 246.72 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.0/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 26, 27, 28
Build Tools: 27.0.3, 28.0.3
System Images: android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6308749
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Python: 2.7.15 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.1 => 0.62.1
npmGlobalPackages:
react-native: Not Found

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[fabOnReact]

please provide the full test case including the image. I could not reproduce this bug, I tested in api 28, 29 and on real emulator.

[tautvilas]

I will try to create example project and will post a link to it

[tautvilas]

I have created a project with react-native init where the issue is visible. Here is the link:

https://github.com/tautvilas/ImagePixelationAndroid

I have noticed that adding borderRadius or borderWith to Image styles pixelates the images. Adding code and example screenshot as well.

<Image source={{uri: "https://i.imgur.com/aLVC6XS.png"}} style={{width: 300,height: 300}}/>

<Image source={{uri: "https://i.imgur.com/aLVC6XS.png"}} style={{width: 300,height: 300, borderRadius: 10, borderWidth: 1, borderColor: 'black'}}/>

[fabOnReact]

import React from 'react';
import {
  ScrollView,
  Image,
} from 'react-native';

const App = () => {
  return (
    <ScrollView>
    <Image source={require("./image.png")} style={{ height: 900}} />
    <Image 
      source={require("./image.png")} 
      style={{ height: 900, borderRadius: 10, borderWidth: 1, borderColor: 'black'}} />
    </ScrollView>
  );
};

export default App;

I still can not reproduce this on Android API 28 emulator. I run it with OpelGL graphic accelleration..

I can't fix a bug if I can not reproduce it, could depend on your local environment set up (if your emulator is using OpenGL) or depends on the device...

Sorry
Thanks for the help

[tautvilas]

Could you try it on a real device? I have reproduced this on Pixel 3 API 29 emulator (same OpenGL settings as you) and on real device OnePlus 6, Android 10, Oxygen OS 10.3.4

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fabOnReact]

You could try fixing this by using prop rendertohardwaretextureandroid with value of true

https://reactnative.dev/docs/view#rendertohardwaretextureandroid
#28881 (comment)

[xiangaoole]

reproduced on my pixel 4a real device.

"react": "17.0.1",
"react-native": "^0.68.2",
"react-native-cli": "^2.0.1"

reproduced in : pixel 4a(Android 12)/Redmi 10x(Android 11)
not reproduced in : HUAWEI P9 Plus(Android 8.0.0)

[xiangaoole]

You could try fixing this by using prop rendertohardwaretextureandroid with value of true

https://reactnative.dev/docs/view#rendertohardwaretextureandroid #28881 (comment)

Not working for this

[github-actions]

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]

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