GeekyAnts / GeekyAnts/NativeBase

Button android_ripple does not respected rounded property

Open
#5,745 0 comments 0 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

The android_ripple property should stay within the bounds of the rounded button - it does not and overflows as a square

### CodeSandbox/Snack link

https://snack.expo.dev/pzo5dJqSp

### Steps to reproduce

1. Create a Button element
2. provide it with "rounded" and "android_ripple" properties (i.e, ````)

### NativeBase Version

3.4.28

### Platform

- [X] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

Can confirm this happens on a variety of platforms, including emulated Pixel 7 device (API Level 30), Samsung Galaxy S22 (API Level 33) and Huawei P30 Pro (API Level 29).

There are some potential workarounds for square or circle objects, but rounded buttons exhibit this very badly - limiting size of ripple by setting radius does not work as a temporary workaround - this is detrimental to UX where we want consistent representation of button pressing for the user

Issue has been referenced before in https://github.com/GeekyAnts/NativeBase/issues/3043 and https://github.com/GeekyAnts/NativeBase/issues/1206 but these issues seem stale and/or forgotten.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.