Aliased Border Radius When Adding Border to Component

[BerkeAras-SMM]

Description

I encountered an issue where border radiuses appear aliased or pixelated when a border is applied around components (e.g., a button). This behavior occurs across various devices. Please see the linked Snack example for reference

Steps to reproduce

1. Install the Application
2. See issue

React Native Version

0.74.5

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: Windows 10 10.0.19045
  CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
  Memory: 41.62 GB / 63.62 GB
Binaries:
  Node:
    version: 20.11.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD  
  npm:
    version: 10.8.3
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-233.14808.21.2331.11709847
  Visual Studio:
    - 16.11.35229.62 (Visual Studio Community 2019)
Languages:
  Java: 17.0.11
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.5
    wanted: 0.74.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

-No Stacktrace-

Reproducer

https://snack.expo.dev/@berkearas/aliased-border-radius-when-adding-border-to-component

Screenshots and Videos

Button WITHOUT BORDER

Button WITH BORDER

Button RADIUS ZOOMED

[react-native-bot]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[spyshower]

@BerkeAras-SMM In the snack you provided, android and web look fine, ios doesn't, but the buttons in all 3 cases look exactly the same. I think it's a simulator/emulator problem only. I have seen similar behaviour in my emulator for quite some time.

[BerkeAras-SMM]

@BerkeAras-SMM In the snack you provided, android and web look fine, ios doesn't, but the buttons in all 3 cases look exactly the same. I think it's a simulator/emulator problem only. I have seen similar behaviour in my emulator for quite some time.

Hi, @spyshower. This issue happens on Real Devices and without Expo Go too. Fyi

[cortinico]

Duplicate of https://github.com/facebook/react-native/issues/41226

Fixes for this have been shipped in 0.76+