callstack / callstack/react-native-paper
Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius
- Lenguaje dominante
- TypeScript
- Estrellas
- 14.5k
- Forks
- 2.2k
- Merge medio
- 5 d 23 h
- PR fusionados (30 d)
- 12
Descripción
### 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`.
Guía de contribución
Línea de trabajo
Empieza en src/components/IconButton/IconButton.tsx, alrededor de las líneas 150-155 y 186, y ejecuta después el Expo Snack enlazado para observar la forma del ripple. Traza cómo se derivan los estilos del botón y TouchableRipple borderRadius; se considera terminado cuando el ripple llena la superficie del botón y coincide con su borderRadius estilizado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- frontend, mobile
- Tipo de issue
- Error
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 48/100