Increasing the Touchable Area for a View

Recently, One of the QA in my team suggested me to increase the Pressable Area in a View. So, my first approach was to increase the button size BUT QA created another ticket stating design is not following brand design guideline and the button is somehow bigger than expected.

I started researching different ways to increase the clickable area for this and found about hitSlop.

hitSlop helps on enhancing the touchable region of a button, which is offered by React Native Touchables. This attribute enables us to expand the touchable area (the outer region) of the button without altering its size.

Explanation: The hitslop property in React Native touchables permits interaction with the component even beyond its designated frame, effectively broadening the touch-sensitive region.

Let's explore the application of this feature through an illustrative example.

Consider a button in a row which is designed to take width as much as possible but it's taking a very small width making it impossible for the user with large finger to click it. Our objective is to enlarge the interactive region of this button. Achieving this enhancement involves leveraging the hitSlop property, as demonstrated below.

<Pressable onPress={() => onRightIconPress && onRightIconPress()}
            style={styles.rightIcon}
            hitSlop={{ left: 25, right: 25, top: 15, bottom: 15 }}>
            <Text> Submit </Text>
          </Pressable>

The above code will increase the touchable area of the button to 200x50. The button will still take the width as much as it needs.

If there is need to increase the touchable area in X or Y direction only, then the following code can be used.

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

The human finger is inherently less precise as a pointing device when compared to a mouse. Therefore, in the process of developing mobile applications, it is crucial to ensure that the touchable regions of our controls adhere to a minimum size, such as 44dp (as per Apple HIG) or 48dp (in line with Google Material Design guidelines). Failure to adhere to these specifications may result in users experiencing difficulties when attempting to tap on the controls.

Note: The Hitslop property is compatible with any of the touchable components offered by React Native. For example, you can implement it with TouchableOpacity,TouchableHighlight, and so on.