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.

react-native-paper/src/components/IconButton/IconButton.tsx

Lines 150 to 155 in 8e5d12d

	const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
	const {
	borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
	borderRadius = buttonSize / 2,
	} = (StyleSheet.flatten(style) || {}) as ViewStyle;

react-native-paper/src/components/IconButton/IconButton.tsx

Line 186 in 8e5d12d

style={[styles.touchable, { borderRadius }]}

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