callstack / callstack/react-native-paper
Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius
- Langage dominant
- TypeScript
- Étoiles
- 14.5k
- Forks
- 2.2k
- Merge moyen
- 5 j 23 h
- PR mergées (30 j)
- 12
Description
### 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
### Alternative solution
Add a prop to customize the `TouchableRipple` `borderRadius`.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez dans src/components/IconButton/IconButton.tsx, autour des lignes 150-155 et 186, puis exécutez le Expo Snack lié pour observer la forme du ripple. Suivez la manière dont les styles du bouton et TouchableRipple borderRadius sont dérivés ; c’est terminé lorsque le ripple remplit la surface du bouton et correspond à son borderRadius stylisé.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native, typescript
- Domaine
- frontend, mobile
- Type d'issue
- Bug
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 48/100