callstack / callstack/react-native-paper

Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius

Aperta
#4,266 3 commenti 1 reazione 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

### Current behaviour

The `IconButton` component `TouchableRipple` `borderRadius` is calculated based on the icon size and the button padding.

https://github.com/callstack/react-native-paper/blob/8e5d12da0685fc5073fd930d4043131b1c472f8b/src/components/IconButton/IconButton.tsx#L150-L155

https://github.com/callstack/react-native-paper/blob/8e5d12da0685fc5073fd930d4043131b1c472f8b/src/components/IconButton/IconButton.tsx#L186

### Expected behaviour

The `borderRadius` for the `TouchableRipple` should match the `borderRadius` set for the button in `style`s and fill the button surface

### How to reproduce?

https://snack.expo.dev/@jahirfiquitiva/rnp-iconbutton-ripple

### Preview

![Shot 2024-01-11 at 12 10 10@2x](https://github.com/callstack/react-native-paper/assets/10360816/edbe7e00-be5a-4f70-9b61-d1e7049e9b64)

### Alternative solution

Add a prop to customize the `TouchableRipple` `borderRadius`.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.