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

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.

Answer 2

I am just adding some code for easy referencing:

<View style={Styles.buttonStyle}>
    <TouchableOpacity onPress={onBtn1Pressed} hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}>
        <Text style={Styles.textStyle}>
           Button text
         </Text>
    </TouchableOpacity>
</View>

Where the parent button container has the following style. Since the width is 150, I have given left and right as 50 to increase the clickable area.

 buttonStyle:{
    alignItems:'center',
    backgroundColor: '#F92660',
    width:150,
    height:50,
    marginTop:20,
    marginBottom:10,
    marginRight:15,
    padding:5,
  },