Repository navigation
Android borderRadius antiAliasing jagged edges #50029
Description
Description
After upgrading React Native from 0.71.3 to 0.73.0, some Android devices exhibit a jagged edge issue when setting borderRadius on a View. This issue persists even with the latest version, 0.78.0.
Steps to reproduce
<View style={styles.section}> <Text style={styles.label}>普通View圆形:</Text> <View style={styles.body}> <Text>Hello World</Text> </View> </View>
body: { width: 200, height: 200, backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', borderRadius: 100, overflow: 'hidden', },
React Native Version
0.78.0
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: macOS 15.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 112.52 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.18.0
path: ~/.nvm/versions/node/v18.18.0/bin/node
Yarn:
version: 1.22.22
path: ~/.nvm/versions/node/v18.18.0/bin/yarn
npm:
version: 9.8.1
path: ~/.nvm/versions/node/v18.18.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /Users/liye/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK:
Android NDK: 21.4.7075529
IDEs:
Android Studio: 2024.1 AI-241.19072.14.2412.12360217
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.10
path: /usr/bin/javac
Ruby:
version: 3.1.2
path: /Users/liye/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: 15.0.1
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.78.0
wanted: 0.78.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
none
Reproducer
none
Screenshots and Videos
Activity
react-native-bot commentedon Mar 14, 2025
Warning
Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:
ly307637627 commentedon Mar 14, 2025
This issue does not occur on all devices; however, unfortunately, my primary commercial device is affected, forcing me to stay on version 0.71.3. Below are the details of the Android device:
Device: SUNMI T2s
OS: Android 9
migueldaipre commentedon Mar 14, 2025
Hey @ly307637627, Can you send a minimum reproducer?
As this is a issue with different devices, it will be difficult to investigate.
Are there other devices with the problem?
ly307637627 commentedon Mar 19, 2025
@migueldaipre It only occurs on certain devices; other devices don’t have this issue. Even when I build the simplest circular component using the latest version of React Native, it still appears as shown in the screenshot on this particular device.
Choco-milk-for-u commentedon Mar 23, 2025
i have the same issue, it seems it is actually well known issue that nobody fixes? because i saw a few closed ones.
NickGerleman commentedon Mar 24, 2025
@jorge-cab is this something fixed by new drawable stack?
jorge-cab commentedon Mar 25, 2025
@NickGerleman I can't repro this? This should've been fixed with #48749
This was happening with devices under certain API level but I don't see it happening at all anymore. Its likely the ones running into this are missing the fix
react-native-bot commentedon Sep 22, 2025
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.
react-native-bot commentedon Sep 29, 2025
This issue was closed because it has been stalled for 7 days with no activity.