Android borderRadius antiAliasing / jagged edges

[danilobuerger]

🐛 Bug Report

Drawing nested Views with borderRadius results in a jagged edge:

To Reproduce

<View style={{ height: 100, width: 100, borderRadius: 50, backgroundColor: "red" }}>
  <View style={{ height: 100, width: 100, borderRadius: 50, backgroundColor: "yellow" }} />
</View>

or

<View style={{ height: 100, width: 100, borderRadius: 50, backgroundColor: "red", overflow: "hidden" }}>
  <View style={{ height: 100, width: 100, backgroundColor: "yellow" }} />
</View>

Expected Behavior

Only a circle with the color yellow should be visible, no red.

Code Example

https://snack.expo.io/By7LJu49E

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
      Memory: 34.91 MB / 16.00 GB
      Shell: 5.7.1 - /usr/local/bin/zsh
    Binaries:
      Node: 11.13.0 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.1, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.3
        System Images: android-16 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.4 => 16.8.4 
      react-native: 0.59.4 => 0.59.4 
    npmGlobalPackages:
      create-react-native-app: 2.0.2
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[farwayer]

I can confirm. And view is not so ideal round as it should be. More ellipse than circle. This issue prevents from using borderRadius for generating circle views.

[punksta]

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java - this class draws view backgrounds. This may not work properly with anti-aliasing.

[ThinkSalat]

I have the same issue on iPhone XR on RN 0.59.9.

[Linoa65]

Someone knows if there is a workaround ?

[BrodaNoel]

I'm using the last version of Expo (which uses RN 59.9), and I have some similar problem or even worst. I can say that there is a regression of this one: #17267

[rkdavidson]

Seeing this on RN 0.59.9 only on Android.

Snack to show what I'm seeing: https://snack.expo.io/rJqV_WTWS

In my case, I have a button with dynamic border changing on certain UI states.
I want the border to be same color as background by default, which on iOS creates illusion of seamless borderless element.

ex:

const jaggedBorderStyle = {
  padding: 16,
  backgroundColor: '#1291D9', // Same color
  borderColor: '#1291D9',     // Same color
  borderRadius: 32,
  borderWidth: 2,
},

I wouldn't run into this issue if the border placement inside/outside box model of View was consistent between iOS and Android.

Screenshots
(easier to see when opened in separate tab/zoomed in)

Seems very similar to #17267 by @dannycochran

[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.

[farwayer]

Issue is still exists in the latest (v0.61.2) React Native build.

[rkdavidson]

+1 Still an issue

[dave05974]

confirming issue on 0.59.9

My env:

  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 949.63 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.0 - ~/.asdf/shims/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.asdf/shims/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9

[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.

[dave05974]

I reviewed https://github.com/react-native-community/releases/blob/master/CHANGELOG.md and it doesn't seem like the issue has been resolved yet.

[mohsinriaz17]

+1
"react-native": "0.61.5"

no need to even zoom,

[nonewcode]

Using border radius with v5 of styled-components seems to give a smooth edge.

[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.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.