Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border radius breaks primary button in payment sheet #1735

Open
dan-avg opened this issue Sep 18, 2024 · 0 comments
Open

Border radius breaks primary button in payment sheet #1735

dan-avg opened this issue Sep 18, 2024 · 0 comments

Comments

@dan-avg
Copy link

dan-avg commented Sep 18, 2024

Describe the bug
When customizing the payment sheet with the "appearance" property, and you add a large border radius for the "primary button", you get a really extreme border radius. If you set a really large value the whole button disappears.

It seems to me that it happens when you set a border radius larger than half the buttons height.

This is only happening on iOS, not on Android

To Reproduce
Steps to reproduce the behavior:

  1. Call initPaymentSheet
  2. Provide the appearance property and set primaryButton.shapes.borderRadius to something like "99"
  3. See the button in the payment sheet looking broken

Expected behavior
I expect the border radius to work as all other places in React Native. Giving a huge border radius (like 99999) should apply a radius that rounds of the corners to a circle, not anything beyond that.

Screenshots
SCR-20240918-nuh

Smartphone (please complete the following information):

  • Device: iPhone 15
  • OS: iOS
  • Version: 0.38.6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant