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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay