Repository navigation
Android - aliasing on borderRadius #41226
Description
Activity
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.
Reacted by Symon 🤍⚡ and Dmytro Lebedynskyisame 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', }} />- added a commit that references this issue
on Aug 29, 2024 - added a commit that references this issue
on Sep 11, 2024 4 remaining items
@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 AFAIK it was not fixed. I will check it on 0.76
@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 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 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.
- added a commit that references this issue
on Jan 22, 2025 - added a commit that references this issue
on Jan 24, 2025 @cipolleschi I think this was solved by #48749 but lmk if there's still issues with this
+1 this issue
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 infoSystem:
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