reactjs - Control touchable area in react-native

Question

I have a square TouchableOpacity button, whose graphics is just a small dot icon in the middle, and the rest is transparent background. I find that in many Android devices it's quite difficult to press it, as apparently only the opaque area is touchable, and the rest isn't.

Is there any way then to control the touchable area of a TouchableOpacity or its other button-like siblings?

question from:https://stackoverflow.com/questions/38955803/control-touchable-area-in-react-native

Answer 1

You can use the View#hitSlop property to increase the touchable area. This can be useful in scenarios where you know that the increased touch area won't overlap with other touchables.

A more robust solution is to use the padding style property. The touchable area of the Touchable* components includes the element's padding.