Button hitSlop is not working, it's being passed to the wrong component

[TechWilk]

Current behaviour

I have a button which I want to use the hitslop={} prop to increase it's touchable area. Currently hitslop has no impact on the button, I can only touch within the visibile button.

Currently the prop is being passed to <Surface> rather than <TouchableRipple> within the react-native-paper button implementation.

Expected behaviour

When applying hitslop I should be able to press outside the button and still trigger both the animation and onPress events.

How to reproduce?

<Button
          mode="contained"
          onPress={() => console.log("pressed")}
          hitSlop={300}
>
          Press me
</Button>

Preview

N/A

What have you tried so far?

Correctly passing hitslop to the TouchableRipple within react-native-paper resolves the issue. PR incoming.

Your Environment

software	version
ios	18.4
android	N/A
react-native	0.77.2
react-native-paper	5.12.5
node	23.3.0
npm or yarn	1.22.22
expo sdk	52.0.46