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

[jahirfiquitiva]

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 styles 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.

[jahirfiquitiva]

I have updated the expo example to show the same issue with the Button component.

I have set a bigger padding and the TouchableRipple does not fill the Button surface

Edit:

This one can be fixed using contentStyle instead of style but I kinda feel it's not so intuitive to do so

[lukewalczak]

Hey @jahirfiquitiva, would you like to investigate the problem and propose the solution?

[jahirfiquitiva]

@lukewalczak I have opened the PR #4278 which should fix the issues and provide alternatives for the things that cannot be easily fixed