Skip to content

pressable.mdx

Latest commit

 

History

History
266 lines (189 loc) · 6.32 KB

pressable.mdx

File metadata and controls

266 lines (189 loc) · 6.32 KB
id pressable
title Pressable
sidebar_label Pressable

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

:::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 (Web only)

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

Called when pointer is hovering over the element.

onHoverOut (Web only)

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

Called when pointer stops hovering over the element.

delayHoverIn (Web only)

delayHoverIn?: number | null;

Duration to wait after hover in before calling onHoverIn.

delayHoverOut (Web only)

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 only)

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 only)

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 only)

android_disableSound?: null | boolean;

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

android_ripple (Android only)

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', }, }); `}/>