pressable.mdx

id	pressable
title	Pressable
sidebar_label	Pressable

import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery';

import HeaderWithBadge from '@site/src/components/HeaderWithBadge';

:::info This component is a drop-in replacement for the Pressable component. :::

Pressable is a component that can detect various stages of tap, press, and hover interactions on any of its children.

To use Pressable, ensure that your app is wrapped in GestureHandlerRootView and import it as follows:

import { Pressable } from 'react-native-gesture-handler';

Properties

children

children?:
  | React.ReactNode
  | ((state: PressableStateCallbackType) => React.ReactNode);

Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.

style

style?:
  | StyleProp<ViewStyle>
  | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);

Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

onPress

onPress?: null | ((event: PressableEvent) => void);

Called after onPressOut when a single tap gesture is detected. Details about the event object can be found in the PressableEvent section below.

onPressIn

onPressIn?: null | ((event: PressableEvent) => void);

Called before onPress when a touch is engaged. Details about the event object can be found in the PressableEvent section below.

onPressOut

onPressOut?: null | ((event: PressableEvent) => void);

Called before onPress when a touch is released (before onPress). Details about the event object can be found in the PressableEvent section below.

onLongPress

onLongPress?: null | ((event: PressableEvent) => void);

Called immediately after pointer has been down for at least delayLongPress milliseconds.

After onLongPress has been called, onPressOut will be called as soon as the pointer is lifted and onPress will not be called at all.

cancelable

cancelable?: null | boolean;

Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to true.

<HeaderWithBadge platforms={['android', 'web']}>

onHoverIn

onHoverIn?: null | ((event: PressableEvent) => void);

Called when pointer is hovering over the element.

<HeaderWithBadge platforms={['android', 'web']}>

onHoverOut

onHoverOut?: null | ((event: PressableEvent) => void);

Called when pointer stops hovering over the element.

<HeaderWithBadge platforms={['web']}>

delayHoverIn

delayHoverIn?: number | null;

Duration to wait after hover in before calling onHoverIn.

<HeaderWithBadge platforms={['web']}>

delayHoverOut

delayHoverOut?: number | null;

Duration to wait after hover out before calling onHoverOut.

delayLongPress

delayLongPress?: null | number;

Duration (in milliseconds) from onPressIn before onLongPress is called. Default value is 500 ms.

disabled

disabled?: null | boolean;

Whether the Pressable behavior is disabled.

<HeaderWithBadge platforms={['android', 'iOS']}>

hitSlop

hitSlop?: null | Insets | number;

Additional distance outside of the view in which a press is detected and onPressIn is triggered.

The Insets type is essentially the same as Rect.

<HeaderWithBadge platforms={['android', 'iOS']}>

pressRetentionOffset

pressRetentionOffset?: null | Insets | number;

Additional distance outside of the view (or hitSlop if present) in which a touch is considered a press before onPressOut is triggered.

The Insets type is essentially the same as Rect.

<HeaderWithBadge platforms={['android']}>

android_disableSound

android_disableSound?: null | boolean;

If true, doesn't play system sound on touch.

<HeaderWithBadge platforms={['android']}>

android_ripple

android_ripple?: null | PressableAndroidRippleConfig;

Enables the Android ripple effect and configures its color, radius and other parameters.

Accepts values of type RippleConfig.

testOnly_pressed

testOnly_pressed?: null | boolean;

Used only for documentation or testing (e.g. snapshot testing).

unstable_pressDelay

unstable_pressDelay?: number | undefined;

Duration (in milliseconds) to wait after press down before calling onPressIn.

PressableEvent

All Pressable callbacks receive an event object as a parameter, which is of type PressableEvent and has the following structure:

export type PressableEvent = { nativeEvent: InnerPressableEvent };

export type InnerPressableEvent = {
  changedTouches: InnerPressableEvent[];
  identifier: number;
  locationX: number;
  locationY: number;
  pageX: number;
  pageY: number;
  target: number;
  timestamp: number;
  touches: InnerPressableEvent[];
  force?: number;
};

Example

See the full example in Gesture Handler repository.

<CollapsibleCode label="Show full example" expandedLabel="Hide full example" lineBounds={[5, 20]} src={` import { View, Text, StyleSheet } from 'react-native'; import { GestureHandlerRootView, Pressable, } from 'react-native-gesture-handler';

export default function Example() { return ( <Pressable style={({ pressed }) => (pressed ? styles.highlight : styles.pressable)} hitSlop={20} pressRetentionOffset={20}> Pressable! ); }

const styles = StyleSheet.create({ pressable: { width: 120, height: 120, backgroundColor: 'mediumpurple', borderWidth: StyleSheet.hairlineWidth, }, highlight: { width: 120, height: 120, backgroundColor: 'red', borderWidth: StyleSheet.hairlineWidth, }, textWrapper: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { color: 'black', }, }); `}/>