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

[TechWilk]

@lukewalczak how long does it normally take to get simple accessibility fixes merged?

It would be helpful if the PR #4678 could be included in one of your next releases. Thanks

[lukewalczak]

@TechWilk for the addition you created (which is completely fine, as you're unlocking base functionality), I, as the person responsible for maintaining this package, need to look at it from a broader perspective, considering other components as well.
What I mean is that I need to check which other components use TouchableRipple as their base, and then also adjust them to allow configuration of hitSlop, so your PR will be merged, but at the same time, I now need to adapt the other components too.

[TechWilk]

That's great, thanks @lukewalczak 👍