Pressable

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.

onHoverIn

Android

Web

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

Called when pointer is hovering over the element.

onHoverOut

Android

Web

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

Called when pointer stops hovering over the element.

delayHoverIn

Web

delayHoverIn?: number | null;

Duration to wait after hover in before calling onHoverIn.

delayHoverOut

Web

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.

hitSlop

Android

iOS

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.

pressRetentionOffset

Android

iOS

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.

android_disableSound

Android

android_disableSound?: null | boolean;

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

android_ripple

Android

android_ripple?: null | PressableAndroidRippleConfig;

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

Accepts values of type RippleConfig.

needsOffscreenAlphaCompositing

Android

needsOffscreenAlphaCompositing?: boolean;

Whether the view should render with an offscreen alpha-compositing buffer when its opacity is less than 1. Defaults to false.

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.

} from 'react-native-gesture-handler';

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