Usage

Pressable is a Core Component that can detect various stages of press interactions on any of its defined children.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

How It Works

On an element wrapped by Pressable:

• onPressInopens in a new window is called when a press is activated.
• onPressOutopens in a new window is called when the press gesture is deactivated.

After onPressIn, the user will either:

• Remove their finger, triggering onPressOutopens in a new window followed by onPressopens in a new window.
• Hold their finger longer than 500 milliseconds before removing it, onLongPressopens in a new window is triggered. (onPressOutopens in a new window will still fire when they remove their finger).

Diagram from React Native Documentation

Note

The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

HitRect & HitSlop

Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, Pressable has an optional HitRect you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a HitRect.

PressRect allows presses to move beyond the element and its HitRect while maintaining activation and being eligible for a "press"—think of sliding your finger slowly away from a button you're pressing down on.

Diagram from React Native Documentation

You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.

More documentation

Pressable uses React Native's Pressability API. For more information around the state machine flow of Pressability and how it works, check out the Pressability implementationopens in a new window.

Styling

The style prop can be a function, an array of objects, or an object that defines the style of the Pressable component with design tokens. When using a function, the function will receive the pressed state as an argument.

Additionally, the children prop can be a function that receives the pressed state as an argument or a React element.

Best Practices

• Press Feedback: Always provide clear visual feedback (like color changes or animations) to indicate the element has been pressed.
• Hit Slop: Use the hitSlop prop to extend the touchable area if needed, especially for smaller elements.
• Optimize Press Timing: Use onPressIn and onPressOut wisely to handle animations or delays without affecting user experience.

Accessibility Considerations

• Pressable Texts: Ensure that the label of the pressable is descriptive for screen readers.
• Feedback for Press: Make sure the visual feedback is discernible for all users, including those with visual impairments.
• Keyboard Navigation: Ensure that pressable components are focusable and navigable with a keyboard.

Pressable Classes

Class Name	Description
abyss-pressable-root	Pressable root element.

Pressable Props

Extends React Native - Pressableopens in a new window props.

Name	Type	Description
style	Style<"Pressable"> | ((state: PressableStateCallbackType) => Style<"Pressable">)	Style object or style callback that receives the current pressed state.