Pressable background clipping with large border radius

[mozzius]

Description

RNGH's Pressable component handles large border radiuses strangely. The correct behaviour is to just round as much as possible and then stop, however RNGH's Pressable seems to make the background get more and more clipped. We use a borderRadius: 999 for our round buttons, so this means the background disappears. This is best illustrated with a screenshot (each button is 32px by 32px and the number is the border radius used):

Appears to be iOS only

Steps to reproduce

1. Create a Pressable with a border radius of 999 and a background color
2. Observe no background color

Snack or a link to a repository

https://github.com/mozzius/rngh-pressable-repro

Gesture Handler version

2.20.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 16

Acknowledgements

Yes

[kacperzolkiewski]

I ran your example on an Android device (Redmi Note 7), and the border radius worked like in default Pressable. It seems the issue occurs only on iOS.

[mozzius]

Thanks! I updated the issue description

[mrpmohiburrahman]

I want to work on this.
I think there are two ways,

• one is to make changes to the React Native's side.
• another one is to make changes on the native side.

( To the repo maintainer ), please, let me know which path should I take.