Chapter 2 · Practice 2 of 5

Use Pressable for touch targets and give it visible feedback

Why it matters

Pressable is the flexible, current primitive for touch handling. It exposes the pressed state, so you can style feedback yourself, and it supports hitSlop to make small icons easier to hit without changing the layout.

Every pressable element should:

show a clear pressed state,
have an accessible label and role (see the accessibility chapter),
avoid doing heavy work synchronously in onPress.

Style the pressed state with the pressed value Pressable passes in
Use hitSlop on small icon buttons

Avoid

A View with an onTouchEnd handler standing in for a button

Example

TSX

<Pressable
  onPress={onSave}
  hitSlop={8}
  accessibilityRole="button"
  accessibilityLabel="Save note"
  style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
>
  <Text style={styles.buttonText}>Save</Text>
</Pressable>