Skip to content

Aliased Border Radius When Adding Border to Component #47199

New issue
New issue
Closed
Closed
Aliased Border Radius When Adding Border to Component#47199
Labels
Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Newer Patch AvailableResolution: FixedA PR that fixes this issue has been merged.

Description

@BerkeAras-SMM
BerkeAras-SMM
opened on Oct 25, 2024

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
Image

Button WITH BORDER
Image (1)

Button RADIUS ZOOMED
Image (2)

Activity

  1. BerkeAras-SMM
    added
    Needs: Triage 🔍
    on Oct 25, 2024
  2. react-native-bot
    added
    Newer Patch Available
    on Oct 25, 2024

  3. react-native-bot commented on Oct 25, 2024

    @react-native-bot
    react-native-bot
    on Oct 25, 2024
    Collaborator
    ⚠️ Newer Version of React Native is Available!
    ℹ️ 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.

  4. react-native-bot commented on Oct 25, 2024

    @react-native-bot
    react-native-bot
    on Oct 25, 2024
    Collaborator
    ⚠️ Newer Version of React Native is Available!
    ℹ️ 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.
  5. cortinico
    added
    Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.
    on Oct 25, 2024

  6. spyshower commented on Oct 26, 2024

    @spyshower
    spyshower
    on Oct 26, 2024

    @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.

  7. BerkeAras-SMM commented on Oct 28, 2024

    @BerkeAras-SMM
    BerkeAras-SMM
    on Oct 28, 2024
    Author

    @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

  8. shubhamguptadream11
    removed
    Needs: Triage 🔍
    on Nov 11, 2024

  9. cortinico commented on Dec 3, 2024

    @cortinico
    cortinico
    on Dec 3, 2024
    Contributor

    Duplicate of #41226

    Fixes for this have been shipped in 0.76+

  10. cortinico
    closed this as completedon Dec 3, 2024
  11. cortinico
    added
    Resolution: FixedA PR that fixes this issue has been merged.
    on Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Newer Patch AvailableResolution: FixedA PR that fixes this issue has been merged.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions