Android - aliasing on borderRadius

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

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.

same in 0.73.8, any solution? thanks.

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,
  },
  ...

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',
        }}
      />

Fix GH-41226 by suppressing path adjustment when not actually drawing…

[RN][Android] Fix GH-41226: suppress path adjustment when not actuall…

@cipolleschi

Still not fixed, @cipolleschi
See #47199

@cortinico

@cortinico is this fixed or not? I saw you closed the other issue saying that the fix has shipped in 0.76, but @BerkeAras-SMM says that it is not fixed.

@BerkeAras-SMM can you check and test on 0.76, please?

@cipolleschi

@cipolleschi AFAIK it was not fixed. I will check it on 0.76

@cipolleschi

@cipolleschi Looks not fixed for me. React Native 0.76.3. Looks better then in previous versions, but not 100% fixed.

Just took these two pictures from 0.76.5 using an android emulator.

With Border	Without Border

It doesn't look bad to me. Are you using the new arch or the old arch?

@cipolleschi

@cipolleschi Thanks for your support!

Tried it on the new and on the old architecture, exact same behaviour.

Are you using a specific device/android version? I don't seem to be able to reproduce the aliasing you are seeing. On my side it looks quite sharp.

@cipolleschi

@cipolleschi you need to have low DPI device to see the issue in full effect. I can confirm that this fix does help, especially with setting a border like

<View
        style={{
          width: 24,
          height: 24,
          borderColor: 'transparent',
          borderRadius: 12,
          backgroundColor: 'red',
        }}
      />

This patch together with border color set will help, but it will not be as smooth as native component.

Gotcha... let me tag a couple of people that might have more context on this.

Fix GH-41226 by suppressing path adjustment when not actually drawing…

Fix anti-aliasing on older Android devices

@cipolleschi

@cipolleschi I think this was solved by #48749 but lmk if there's still issues with this

+1 this issue

Navigation Menu

Repository navigation

Android - aliasing on borderRadius #41226

Description

React Native Version

Output of `npx react-native info`

Steps to reproduce

Snack, screenshot, or link to a repository

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Android - aliasing on borderRadius #41226

Description

Description

React Native Version

Output of npx react-native info

Steps to reproduce

Snack, screenshot, or link to a repository

Activity

bladerunner2020 commented on May 16, 2024

quangtuan28200 commented on Jul 4, 2024

bladerunner2020 commented on Jul 4, 2024

dlebedynskyi commented on Aug 12, 2024

BerkeAras-SMM commented on Dec 3, 2024

cipolleschi commented on Dec 3, 2024

BerkeAras-SMM commented on Dec 3, 2024

BerkeAras-SMM commented on Dec 6, 2024

cipolleschi commented on Dec 17, 2024

BerkeAras-SMM commented on Dec 18, 2024

cipolleschi commented on Dec 18, 2024

dlebedynskyi commented on Jan 14, 2025

cipolleschi commented on Jan 16, 2025

jorge-cab commented on Jul 1, 2025

procyphagenics commented on Jul 7, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`