Increase Touchable Area of Button in React Native

#reactnative #mobile #ux

Have you ever experienced a situation where you want to increase the touchable area of a button but without increasing its size? 🤔 If yes, then you are at the right place. In this article, we will see how to increase the touchable area of a button in react native.

Sometimes, due to design constraints, we can’t increase the size of the button. In such cases, to increase the touchable area of the button we can use a property called HitSlop, provided by React Native Touchables. This property allows us to increase the touchable area (outer area) of the button without increasing its size.

hitslop : React Native touchables provide a property called hitSlop which allows the component to be touched outside of its frame.

Let’s see how to use this property using an example.

We have a button with a size of 150x30 (width x height). We want to increase the touchable area of this button to 200x50 (width x height).. To do this, we can use the hitSlop property as shown below.

<TouchableOpacity
  style={styles.button}
  hitSlop={{ top: 25, bottom: 25, left: 15, right: 15 }}
>
  <Text> Login </Text>
</TouchableOpacity>

The above code will increase the touchable area of the button to 200x50 (Right Side in Image). The button will still have a size of 150x30 (Left Side in Image). See the below image to get visual idea of this.

If you want to increase the touchable area in X or Y direction only, then you can use the following code.

<TouchableOpacity 
  style={styles.button} 
  hitSlop={{ x: 25, y: 15 }}
>
  <Text> Login </Text>
</TouchableOpacity>

Human finger is a less precise pointing device comparing to mouse. So while developing mobile apps we have to make sure the touchable areas of our controls are at least 44dp (according to Apple HIG) or 48dp (according to Google Material Design guidelines). If we don’t do this, then the user will have a hard time tapping on the controls.

Note: Hitslop works with any of the touchable components provided by React Native. For example, you can use TouchableOpacity, TouchableHighlight, etc.

Closing Comments 👋

In this article, We learned how to use the hitSlop property in React Native to increase the touchable area of a button without increasing its size. 📱

For any questions or suggestions, please feel free to comment below. 💬

If you find this article useful, share it with your friends and follow me for regular update of my articles. 🔗

Rushi Patel, Signing Off! 😊