Hit Slop

Hit Slop

Hit Slop and Touch Target Sizing

hitSlop extends the touchable area beyond the view's bounds without changing layout, by one number or by { top, bottom, left, right }; pressRetentionOffset is how far a pressed finger may drift before the press cancels. This close button is drawn 24 dp wide but answers to 48 dp:

A 24 dp close button with a 12 dp slop on each side (HitSlop.js, excerpt)XML

      <Pressable
        hitSlop={12}
        pressRetentionOffset={24}
        onLayout={(e) => console.log('layout', JSON.stringify(e.nativeEvent.layout))}
        onPressIn={({ nativeEvent: { locationX: x, locationY: y } }) =>
          console.log(`pressIn at x=${x.toFixed(1)} y=${y.toFixed(1)}`)}
        onPress={() => console.log('close pressed')}
        style={{ width: 24, height: 24, borderRadius: 12, backgroundColor: '#37474f' }}
      >

A tap in the middle, one 10 dp left of the circle (inside the slop) and one 22 dp left of it logged:

Output of 64

 LOG  pressIn at x=11.8 y=11.8
 LOG  close pressed
 LOG  pressIn at x=-10.3 y=11.8
 LOG  close pressed

The second press counted, with a negative locationX (coordinates are relative to the view), and the third, beyond the slop, did nothing. The slop never reaches past the parent's bounds, and a sibling on top wins where they overlap, so prefer a real 48 dp view where the layout allows.

MENU