DEV Community

Surhid Amatya
Surhid Amatya

Posted on • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more