Skip to main content

Touchables and Pressable

Interaction primitives define how the UI feels. They also determine whether accessibility, feedback timing, and gesture expectations stay consistent across the app.

Why Pressable is usually the default​

Pressable gives the team a flexible base for:

  • press feedback
  • pressed, focused, and disabled states
  • larger hit targets
  • consistent interaction wrappers for buttons, cards, rows, and list items

For most modern React Native codebases, Pressable is the right default interaction primitive.

When older touchables still appear​

You may still encounter:

  • TouchableOpacity
  • TouchableHighlight
  • TouchableWithoutFeedback

These can still work, but teams should avoid mixing multiple interaction styles without reason. A codebase with five different touch wrappers usually has inconsistent feedback behavior.

Best patterns​

  • wrap actionable surfaces in one shared app interaction primitive
  • define hit slop intentionally for small targets
  • make disabled state visually and behaviorally clear
  • align pressed-state styling with the design system

Common mistakes​

  • putting press handlers on containers that are too small
  • using opacity changes everywhere without a broader interaction model
  • forgetting focus behavior for keyboard or assistive navigation
  • placing multiple nested pressables in ways that produce event ambiguity

Semantics​

Every interactive surface should answer:

  • what action does this trigger
  • is the surface obviously tappable
  • what feedback appears on press
  • what does assistive technology announce

If those answers are not obvious from the code and UI, the component layer needs more structure.

Team rule​

Use one default press primitive and one shared interaction vocabulary. Variation should come from design tokens and state styling, not from ad hoc interaction mechanics.

Continue with Lists, Scroll Containers, and Refresh for tappable collection surfaces.