Android - aliasing on borderRadius

[steven-sh]

Description

After upgrading my project to the latest version of react native (from 0.62) I've noticed that antialiasing is no longer applied to the borders of Views when a borderRadius is applied. This is particularly noticeable on low DPI devices such as tablets.

I mainly use borderRadius for round buttons, or rectangular buttons with rounded corners. Is there a better way to do it that will give me antialiasing?

I've attached screenshots of a view with a borderRadius applied in both 0.72 and 0.62 and linked to a reproducer project.

React Native Version

0.72.6

Output of npx react-native info

System:
OS: macOS 13.6
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 1.49 GB / 16.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 16.13.2
path: /usr/local/bin/node
Yarn: Not Found
npm:
version: 8.1.2
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /Users/ghee/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 15.0/15A240d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20
path: /usr/local/opt/openjdk@11/bin/javac
Ruby:
version: 2.7.4
path: /Users/ghee/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

Create a view with a nonzero borderRadius in its style.

Snack, screenshot, or link to a repository

https://github.com/steven-sh/react-native-72-aliasing

[bladerunner2020]

I have RN 0.73.6 and the issue is still there. It looks just terrible.
In my opinion, this should be high priority issue.

[quangtuan28200]

same in 0.73.8, any solution? thanks.

[bladerunner2020]

same in 0.73.8, any solution? thanks.

We added a border for anti-aliasing.

const useStyles = makeStyles((theme = defaultTheme) => ({
  button: {
    borderWidth: 2,
    borderColor: theme.colors.backgroundSecondary,
    borderRadius: 30,
  },
  ...

[dlebedynskyi]

Running into same problem on 0.72 and 0.73.

Fix with borderWidth and borderColor does help, but it is not as good as native component. Especially visible on "circle" components for low DPI devices

 <Switch
        thumbColor={'purple'}
        trackColor={{false: 'yellow', true: 'orange'}}
        value={true}
        onValueChange={value => console.log(value)}
      />
      
      <View
        style={{
          width: 23,
          height: 23,
          borderWidth: 2,
          borderColor: 'red',
          borderRadius: 12,
          backgroundColor: 'red',
        }}
      />