callstack / callstack/react-native-paper
Button and IconButton TouchableRipple borderRadius is calculated from the icon size and not the button borderRadius
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 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`.
Contributor guide
Research direction
Start in src/components/IconButton/IconButton.tsx around lines 150-155 and 186, then run the linked Expo Snack to observe the ripple shape. Trace how the button styles and TouchableRipple borderRadius are derived; done means the ripple fills the button surface and matches its styled borderRadius.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100