Skip to main content
Version: 3.x

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.

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>
);
}