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?
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.
Touchables If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized.
A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. Opacity is controlled by wrapping the children in an Animated.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With