DEV Community

Cover image for React Native hitSlop: Enhance Tappable Area for Small Buttons
PEAKIQ
PEAKIQ

Posted on • Originally published at peakiq.in

React Native hitSlop: Enhance Tappable Area for Small Buttons

#reactnative #mobileux #a11y #uiux

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/react-native-hitslop-make-tiny-taps-easy

React Native hitSlop Explained — Improve Touch Area for Small Buttons

Small buttons are a UX problem. Users miss them. They tap again. They get frustrated.
hitSlop solves this without touching your layout. Published on peakiq.in.

What is hitSlop?

hitSlop is a prop available on touchable components like Pressable, TouchableOpacity, and TouchableHighlight. It expands the tappable area of a component beyond its visual bounds — invisibly.

No extra padding. No layout shifts. Just a larger touch target.

How It Works

You can pass hitSlop in two ways:

As a number — expands the touch area equally on all four sides:

hitSlop={10}
Enter fullscreen mode Exit fullscreen mode

As an object — expands each side independently:

hitSlop={{ top: 10, right: 16, bottom: 10, left: 16 }}
Enter fullscreen mode Exit fullscreen mode

Think of it as invisible padding around the touch target that only exists for the finger, not the layout.

Example: Close Button

A close button is a classic case — small icon, easy to miss.

import { Pressable, Text } from 'react-native';

export function CloseButton({ onPress }) {
  return (
    <Pressable
      onPress={onPress}
      hitSlop={10}
      style={{ padding: 4 }}
      accessibilityLabel="Close"
      accessibilityRole="button"
    >
      <Text>✕</Text>
    </Pressable>
  );
}
Enter fullscreen mode Exit fullscreen mode

Even if the user taps slightly outside the icon, the press still registers. The visual size stays the same.

When to Use hitSlop

hitSlop is most useful when:

  • The button is visually small (icon-only buttons, close icons, inline links)
  • You cannot increase padding without breaking the layout
  • You want to meet the recommended 44×44dp minimum touch target size (Apple HIG / Material Design)
  • You need better accessibility without restructuring your component tree

Why It Matters

  • Reduces missed taps on small UI elements
  • Improves usability without any visual or layout changes
  • Works on both iOS and Android
  • Takes two seconds to add and immediately improves the feel of your app

Quick Reference 

// Equal expansion on all sides
<Pressable hitSlop={12} onPress={onPress}>

// Per-side expansion
<Pressable hitSlop={{ top: 8, right: 16, bottom: 8, left: 16 }} onPress={onPress}>
Enter fullscreen mode Exit fullscreen mode

Published on peakiq.in — React Native guides, tips, and tutorials.

Top comments (0)