Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Control touchable area in react-native

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?

like image 241
mllm Avatar asked Aug 15 '16 13:08

mllm


People also ask

How do you increase touchable area in React Native?

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.

What are touchable interactions in React Native?

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.

How do you use touchable opacity in React Native?

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.


1 Answers

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.

like image 182
jevakallio Avatar answered Oct 04 '22 02:10

jevakallio