react-native-gesture-handler

react-native-gesture-handler

Version 2.21.2
Published 1 month ago
4.11 MB
4 dependencies
MIT license

Install

npm i react-native-gesture-handler

yarn add react-native-gesture-handler

pnpm add react-native-gesture-handler

Overview

Declarative API exposing native platform touch and gesture system to React Native

Index

Variables

variable BaseButton

const BaseButton: React.ForwardRefExoticComponent<any>;

variable BorderlessButton

const BorderlessButton: React.ForwardRefExoticComponent<any>;

variable Directions

const Directions: {
    readonly RIGHT: 1;
    readonly LEFT: 2;
    readonly UP: 4;
    readonly DOWN: 8;
};

variable DrawerLayoutAndroid

const DrawerLayoutAndroid: React.ForwardRefExoticComponent<any>;

variable FlingGestureHandler

const FlingGestureHandler: any;

variable ForceTouchGestureHandler

const ForceTouchGestureHandler: any;

variable Gesture

const Gesture: {
    Tap: () => TapGesture;
    Pan: () => PanGesture;
    Pinch: () => PinchGesture;
    Rotation: () => RotationGesture;
    Fling: () => FlingGesture;
    LongPress: () => LongPressGesture;
    ForceTouch: () => ForceTouchGesture;
    Native: () => NativeGesture;
    Manual: () => ManualGesture;
    Hover: () => HoverGesture;
    Race: (...gestures: Gesture[]) => ComposedGesture;
    Simultaneous(...gestures: Gesture[]): SimultaneousGesture;
    Exclusive(...gestures: Gesture[]): ExclusiveGesture;
};

Gesture is the object that allows you to create and compose gestures.
### Remarks - Consider wrapping your gesture configurations with useMemo, as it will reduce the amount of work Gesture Handler has to do under the hood when updating gestures.
See Also
- https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture

variable LongPressGestureHandler

const LongPressGestureHandler: any;

variable NativeViewGestureHandler

const NativeViewGestureHandler: any;

variable PanGestureHandler

const PanGestureHandler: any;

variable PinchGestureHandler

const PinchGestureHandler: any;

variable PureNativeButton

const PureNativeButton: HostComponent<RawButtonProps>;

variable RawButton

const RawButton: React.ForwardRefExoticComponent<any>;

variable RectButton

const RectButton: React.ForwardRefExoticComponent<any>;

variable RefreshControl

const RefreshControl: React.ForwardRefExoticComponent<any>;

variable RotationGestureHandler

const RotationGestureHandler: any;

variable ScrollView

const ScrollView: React.ForwardRefExoticComponent<any>;

variable State

const State: {
    readonly UNDETERMINED: 0;
    readonly FAILED: 1;
    readonly BEGAN: 2;
    readonly CANCELLED: 3;
    readonly ACTIVE: 4;
    readonly END: 5;
};

variable Switch

const Switch: React.ForwardRefExoticComponent<any>;

variable TapGestureHandler

const TapGestureHandler: any;

variable TextInput

const TextInput: React.ForwardRefExoticComponent<any>;

variable TouchableWithoutFeedback

const TouchableWithoutFeedback: React.ForwardRefExoticComponent<any>;

Functions

function createNativeWrapper

createNativeWrapper: <P>(
    Component: React.ComponentType<P>,
    config?: Readonly<NativeViewGestureHandlerProps>
) => React.ForwardRefExoticComponent<any>;

function enableExperimentalWebImplementation

enableExperimentalWebImplementation: (_shouldEnable?: boolean) => void;

function enableLegacyWebImplementation

enableLegacyWebImplementation: (shouldUseLegacyImplementation?: boolean) => void;

function FlatList

FlatList: <ItemT = any>(
    props: React.PropsWithChildren<any>,
    ref: React.ForwardedRef<any>
) => ReactElement | null;

function GestureDetector

GestureDetector: (props: GestureDetectorProps) => React.JSX.Element;

GestureDetector is responsible for creating and updating native gesture handlers based on the config of provided gesture.
### Props - gesture - userSelect (**Web only**) - enableContextMenu (**Web only**) - touchAction (**Web only**)
### Remarks - Gesture Detector will use first native view in its subtree to recognize gestures, however if this view is used only to group its children it may get automatically collapsed. - Using the same instance of a gesture across multiple Gesture Detectors is not possible.
See Also
- https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector

function gestureHandlerRootHOC

gestureHandlerRootHOC: <P extends object>(
    Component: React.ComponentType<P>,
    containerStyles?: StyleProp<ViewStyle>
) => React.ComponentType<P>;

function GestureHandlerRootView

GestureHandlerRootView: ({
    style,
    ...rest
}: GestureHandlerRootViewProps) => React.JSX.Element;

function Pressable

Pressable: (props: PressableProps) => React.JSX.Element;

Classes

class DrawerLayout

class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {}

constructor

constructor(props: DrawerLayoutProps);

property closeDrawer

closeDrawer: (options?: DrawerMovementOption) => void;

property defaultProps

static defaultProps: {
    drawerWidth: number;
    drawerPosition: string;
    useNativeAnimations: boolean;
    drawerType: string;
    edgeWidth: number;
    minSwipeDistance: number;
    overlayColor: string;
    drawerLockMode: string;
    enableTrackpadTwoFingerGesture: boolean;
};

property openDrawer

openDrawer: (options?: DrawerMovementOption) => void;

property positions

static positions: { Left: string; Right: string };

method render

render: () => React.JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: (
    props: DrawerLayoutProps,
    state: DrawerLayoutState
) => boolean;

class Swipeable

class Swipeable extends Component<SwipeableProps, SwipeableState> {}

Deprecated
use Reanimated version of Swipeable instead
This component allows for implementing swipeable rows or similar interaction.

constructor

constructor(props: SwipeableProps);

property close

close: () => void;

property defaultProps

static defaultProps: {
    friction: number;
    overshootFriction: number;
    useNativeAnimations: boolean;
};

property openLeft

openLeft: () => void;

property openRight

openRight: () => void;

property reset

reset: () => void;

method render

render: () => React.JSX.Element;

method shouldComponentUpdate

shouldComponentUpdate: (props: SwipeableProps, state: SwipeableState) => boolean;

class TouchableHighlight

class TouchableHighlight extends Component<TouchableHighlightProps, State> {}

TouchableHighlight follows RN's implementation

constructor

constructor(props: any);

property defaultProps

static defaultProps: {
    activeOpacity: number;
    delayPressOut: number;
    underlayColor: string;
    delayLongPress: number;
    extraButtonProps: { rippleColor: string; exclusive: boolean };
};

property hasPressHandler

hasPressHandler: () => ((event: any) => void) & (() => void);

property hideUnderlay

hideUnderlay: () => void;

property onStateChange

onStateChange: (_from: number, to: number) => void;

property showUnderlay

showUnderlay: () => void;

method render

render: () => React.JSX.Element;

method renderChildren

renderChildren: () => React.JSX.Element;

class TouchableOpacity

class TouchableOpacity extends Component<TouchableOpacityProps> {}

TouchableOpacity bases on timing animation which has been used in RN's core

property defaultProps

static defaultProps: {
    activeOpacity: number;
    delayLongPress: number;
    extraButtonProps: { rippleColor: string; exclusive: boolean };
};

property getChildStyleOpacityWithDefault

getChildStyleOpacityWithDefault: () => number;

property onStateChange

onStateChange: (_from: number, to: number) => void;

property opacity

opacity: Animated.Value;

property setOpacityTo

setOpacityTo: (value: number, duration: number) => void;

method render

render: () => React.JSX.Element;

Interfaces

interface BaseButtonProps

interface BaseButtonProps extends RawButtonProps {}

property delayLongPress

delayLongPress?: number;

Delay, in milliseconds, after which the onLongPress callback gets called. Defaults to 600.

property onActiveStateChange

onActiveStateChange?: (active: boolean) => void;

Called when button changes from inactive to active and vice versa. It passes active state as a boolean variable as a first parameter for that method.

property onLongPress

onLongPress?: () => void;

Called when the button gets pressed and is held for delayLongPress milliseconds.

property onPress

onPress?: (pointerInside: boolean) => void;

Called when the button gets pressed (analogous to onPress in TouchableHighlight from RN core).

property style

style?: StyleProp<ViewStyle>;

property testID

testID?: string;

interface BorderlessButtonProps

interface BorderlessButtonProps extends BaseButtonProps {}

property activeOpacity

activeOpacity?: number;

iOS only.
Opacity applied to the button when it is in an active state.

interface DrawerLayoutProps

interface DrawerLayoutProps {}

property activeCursor

activeCursor?: ActiveCursor;

'auto' Defines which cursor property should be used when gesture activates. Values: see CSS cursor values

property children

children?:
    | React.ReactNode
    | ((openValue?: AnimatedInterpolation) => React.ReactNode);

property contentContainerStyle

contentContainerStyle?: StyleProp<ViewStyle>;

property drawerBackgroundColor

drawerBackgroundColor?: string;

property drawerContainerStyle

drawerContainerStyle?: StyleProp<ViewStyle>;

property drawerLockMode

drawerLockMode?: DrawerLockMode;

property drawerPosition

drawerPosition?: DrawerPosition;

property drawerType

drawerType?: DrawerType;

property drawerWidth

drawerWidth?: number;

property edgeWidth

edgeWidth?: number;

Defines how far from the edge of the content view the gesture should activate.

property enableContextMenu

enableContextMenu?: boolean;

'false if MouseButton.RIGHT is specified' Allows to enable/disable context menu.

property enableTrackpadTwoFingerGesture

enableTrackpadTwoFingerGesture?: boolean;

Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture.

property hideStatusBar

hideStatusBar?: boolean;

When set to true Drawer component will use API to hide the OS status bar whenever the drawer is pulled or when its in an "open" state.

property keyboardDismissMode

keyboardDismissMode?: DrawerKeyboardDismissMode;

property minSwipeDistance

minSwipeDistance?: number;

property mouseButton

mouseButton?: MouseButton;

'MouseButton.LEFT' Allows to choose which mouse button should underlying pan handler react to.

property onDrawerClose

onDrawerClose?: () => void;

Called when the drawer is closed.

property onDrawerOpen

onDrawerOpen?: () => void;

Called when the drawer is opened.

property onDrawerSlide

onDrawerSlide?: (position: number) => void;

property onDrawerStateChanged

onDrawerStateChanged?: (newState: DrawerState, drawerWillShow: boolean) => void;

Called when the status of the drawer changes.

property onGestureRef

onGestureRef?: (ref: PanGestureHandler) => void;

property overlayColor

overlayColor?: string;

black
Color of a semi-transparent overlay to be displayed on top of the content view when drawer gets open. A solid color should be used as the opacity is added by the Drawer itself and the opacity of the overlay is animated (from 0% to 70%).

property renderNavigationView

renderNavigationView: (progressAnimatedValue: Animated.Value) => React.ReactNode;

This attribute is present in the standard implementation already and is one of the required params. Gesture handler version of DrawerLayout make it possible for the function passed as renderNavigationView to take an Animated value as a parameter that indicates the progress of drawer opening/closing animation (progress value is 0 when closed and 1 when opened). This can be used by the drawer component to animated its children while the drawer is opening or closing.

property statusBarAnimation

statusBarAnimation?: StatusBarAnimation;

'slide'
Can be used when hideStatusBar is set to true and will select the animation used for hiding/showing the status bar. See documentation for more details

property useNativeAnimations

useNativeAnimations?: boolean;

property userSelect

userSelect?: UserSelect;

'none' Defines which userSelect property should be used. Values: 'none'|'text'|'auto'

interface FlingGestureHandlerProps

interface FlingGestureHandlerProps
    extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
        FlingGestureConfig {}

interface ForceTouchGestureHandlerProps

interface ForceTouchGestureHandlerProps
    extends BaseGestureHandlerProps<ForceTouchGestureHandlerEventPayload>,
        ForceTouchGestureConfig {}

interface GestureEvent

interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {}

property nativeEvent

nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;

interface GestureEventPayload

interface GestureEventPayload {}

property handlerTag

handlerTag: number;

property numberOfPointers

numberOfPointers: number;

property pointerType

pointerType: PointerType;

property state

state: ValueOf<typeof State>;

interface GestureStateManager

interface GestureStateManagerType {}

property activate

activate: () => void;

property begin

begin: () => void;

property end

end: () => void;

property fail

fail: () => void;

interface HandlerStateChangeEvent

interface HandlerStateChangeEvent<ExtraEventPayloadT = Record<string, unknown>> {}

property nativeEvent

nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;

interface HandlerStateChangeEventPayload

interface HandlerStateChangeEventPayload extends GestureEventPayload {}

property oldState

oldState: ValueOf<typeof State>;

interface LongPressGestureHandlerProps

interface LongPressGestureHandlerProps
    extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
        LongPressGestureConfig {}

interface NativeViewGestureHandlerProps

interface NativeViewGestureHandlerProps
    extends BaseGestureHandlerProps<NativeViewGestureHandlerPayload>,
        NativeViewGestureConfig {}

interface PanGestureHandlerProps

interface PanGestureHandlerProps
    extends BaseGestureHandlerProps<PanGestureHandlerEventPayload>,
        CommonPanProperties {}

property activeOffsetX

activeOffsetX?: number | [activeOffsetXStart: number, activeOffsetXEnd: number];

Range along X axis (in points) where fingers travels without activation of handler. Moving outside of this range implies activation of handler. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

property activeOffsetY

activeOffsetY?: number | [activeOffsetYStart: number, activeOffsetYEnd: number];

Range along X axis (in points) where fingers travels without activation of handler. Moving outside of this range implies activation of handler. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

property failOffsetX

failOffsetX?: number | [failOffsetXStart: number, failOffsetXEnd: number];

When the finger moves outside this range (in points) along X axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

property failOffsetY

failOffsetY?: number | [failOffsetYStart: number, failOffsetYEnd: number];

When the finger moves outside this range (in points) along Y axis and handler hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

interface PinchGestureHandlerProps

interface PinchGestureHandlerProps
    extends BaseGestureHandlerProps<PinchGestureHandlerEventPayload> {}

interface PressableProps

interface PressableProps
    extends AccessibilityProps,
        Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {}

property android_disableSound

android_disableSound?: null | boolean;

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

property android_ripple

android_ripple?: null | PressableAndroidRippleConfig;

Enables the Android ripple effect and configures its color. android

property cancelable

cancelable?: null | boolean;

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

property 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.

property delayHoverIn

delayHoverIn?: number | null;

Duration to wait after hover in before calling onHoverIn. web macos
NOTE: not present in RN docs

property delayHoverOut

delayHoverOut?: number | null;

Duration to wait after hover out before calling onHoverOut. web macos
NOTE: not present in RN docs

property delayLongPress

delayLongPress?: null | number;

Duration (in milliseconds) from onPressIn before onLongPress is called.

property disabled

disabled?: null | boolean;

Whether the press behavior is disabled.

property hitSlop

hitSlop?: null | Insets | number;

Additional distance outside of this view in which a press is detected.

property onHoverIn

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

Called when the hover is activated to provide visual feedback.

property onHoverOut

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

Called when the hover is deactivated to undo visual feedback.

property onLongPress

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

Called when a long-tap gesture is detected.

property onPress

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

Called when a single tap gesture is detected.

property onPressIn

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

Called when a touch is engaged before onPress.

property onPressOut

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

Called when a touch is released before onPress.

property pressRetentionOffset

pressRetentionOffset?: null | Insets | number;

Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.

property 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.

property testOnly_pressed

testOnly_pressed?: null | boolean;

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

property unstable_pressDelay

unstable_pressDelay?: number;

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

interface RawButtonProps

interface RawButtonProps extends NativeViewGestureHandlerProps {}

property borderless

borderless?: boolean;

Android only.
Set this to true if you want the ripple animation to render outside the view bounds.

property exclusive

exclusive?: boolean;

Defines if more than one button could be pressed simultaneously. By default set true.

property foreground

foreground?: boolean;

Android only.
Defines whether the ripple animation should be drawn on the foreground of the view.

property rippleColor

rippleColor?: any;

Android only.
Defines color of native ripple animation used since API level 21.

property rippleRadius

rippleRadius?: number | null;

Android only.
Defines radius of native ripple animation used since API level 21.

property style

style?: StyleProp<ViewStyle>;

Style object, use it to set additional styles.

property touchSoundDisabled

touchSoundDisabled?: boolean;

Android only.
Set this to true if you don't want the system to play sound when the button is pressed.

interface RectButtonProps

interface RectButtonProps extends BaseButtonProps {}

property activeOpacity

activeOpacity?: number;

iOS only.
Opacity applied to the underlay when button is in active state.

property underlayColor

underlayColor?: string;

Background color that will be dimmed when button is in active state.

interface RotationGestureHandlerProps

interface RotationGestureHandlerProps
    extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}

interface SwipeableProps

interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {}

property animationOptions

animationOptions?: Record<string, unknown>;

property childrenContainerStyle

childrenContainerStyle?: StyleProp<ViewStyle>;

Style object for the children container (Animated.View), for example to apply flex: 1

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style object for the container (Animated.View), for example to override overflow: 'hidden'.

property dragOffsetFromLeftEdge

dragOffsetFromLeftEdge?: number;

Distance that the panel must be dragged from the left edge to be considered a swipe. The default value is 10.

property dragOffsetFromRightEdge

dragOffsetFromRightEdge?: number;

Distance that the panel must be dragged from the right edge to be considered a swipe. The default value is 10.

property enableTrackpadTwoFingerGesture

enableTrackpadTwoFingerGesture?: boolean;

Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture.

property friction

friction?: number;

Specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times "slower".

property leftThreshold

leftThreshold?: number;

Distance from the left edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.

property onSwipeableClose

onSwipeableClose?: (direction: 'left' | 'right', swipeable: Swipeable) => void;

Called when action panel is closed.

property onSwipeableCloseStartDrag

onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;

Called when action panel starts being shown on dragging to close.

property onSwipeableLeftOpen

onSwipeableLeftOpen?: () => void;

Deprecated
Use direction argument of onSwipeableOpen()
Called when left action panel gets open.

property onSwipeableLeftWillOpen

onSwipeableLeftWillOpen?: () => void;

Deprecated
Use direction argument of onSwipeableWillOpen()
Called when left action panel starts animating on open.

property onSwipeableOpen

onSwipeableOpen?: (direction: 'left' | 'right', swipeable: Swipeable) => void;

Called when action panel gets open (either right or left).

property onSwipeableOpenStartDrag

onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;

Called when action panel starts being shown on dragging to open.

property onSwipeableRightOpen

onSwipeableRightOpen?: () => void;

Deprecated
Use direction argument of onSwipeableOpen()
Called when right action panel gets open.

property onSwipeableRightWillOpen

onSwipeableRightWillOpen?: () => void;

Deprecated
Use direction argument of onSwipeableWillOpen()
Called when right action panel starts animating on open.

property onSwipeableWillClose

onSwipeableWillClose?: (direction: 'left' | 'right') => void;

Called when action panel starts animating on close.

property onSwipeableWillOpen

onSwipeableWillOpen?: (direction: 'left' | 'right') => void;

Called when action panel starts animating on open (either right or left).

property overshootFriction

overshootFriction?: number;

Specifies how much the visual interaction will be delayed compared to the gesture distance at overshoot. Default value is 1, it mean no friction, for a native feel, try 8 or above.

property overshootLeft

overshootLeft?: boolean;

Value indicating if the swipeable panel can be pulled further than the left actions panel's width. It is set to true by default as long as the left panel render method is present.

property overshootRight

overshootRight?: boolean;

Value indicating if the swipeable panel can be pulled further than the right actions panel's width. It is set to true by default as long as the right panel render method is present.

property renderLeftActions

renderLeftActions?: (
    progressAnimatedValue: AnimatedInterpolation,
    dragAnimatedValue: AnimatedInterpolation,
    swipeable: Swipeable
) => React.ReactNode;

This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue]
progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
To support rtl flexbox layouts use flexDirection styling.

property renderRightActions

renderRightActions?: (
    progressAnimatedValue: AnimatedInterpolation,
    dragAnimatedValue: AnimatedInterpolation,
    swipeable: Swipeable
) => React.ReactNode;

This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue]
progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
To support rtl flexbox layouts use flexDirection styling.

property rightThreshold

rightThreshold?: number;

Distance from the right edge at which released panel will animate to the open state (or the open panel will animate into the closed state). By default it's a half of the panel's width.

property useNativeAnimations

useNativeAnimations?: boolean;

interface TapGestureHandlerProps

interface TapGestureHandlerProps
    extends BaseGestureHandlerProps<TapGestureHandlerEventPayload>,
        TapGestureConfig {}

Enums

enum HoverEffect

enum HoverEffect {
    NONE = 0,
    LIFT = 1,
    HIGHLIGHT = 2,
}

member HIGHLIGHT

HIGHLIGHT = 2

member LIFT

LIFT = 1

member NONE

NONE = 0

enum MouseButton

enum MouseButton {
    LEFT = 1,
    RIGHT = 2,
    MIDDLE = 4,
    BUTTON_4 = 8,
    BUTTON_5 = 16,
    ALL = 31,
}

member ALL

ALL = 31

member BUTTON_4

BUTTON_4 = 8

member BUTTON_5

BUTTON_5 = 16

member LEFT

LEFT = 1

member MIDDLE

MIDDLE = 4

member RIGHT

RIGHT = 2

enum PointerType

enum PointerType {
    TOUCH = 0,
    STYLUS = 1,
    MOUSE = 2,
    KEY = 3,
    OTHER = 4,
}

member KEY

KEY = 3

member MOUSE

MOUSE = 2

member OTHER

OTHER = 4

member STYLUS

STYLUS = 1

member TOUCH

TOUCH = 0

Type Aliases

type BaseButtonProperties

type BaseButtonProperties = BaseButtonProps;

type BorderlessButtonProperties

type BorderlessButtonProperties = BorderlessButtonProps;

type ComposedGesture

type ComposedGestureType = InstanceType<typeof ComposedGesture>;

type Directions

type Directions = (typeof Directions)[keyof typeof Directions];

type DrawerKeyboardDismissMode

type DrawerKeyboardDismissMode = 'none' | 'on-drag';

type DrawerLayoutAndroid

type DrawerLayoutAndroid = typeof DrawerLayoutAndroid & RNDrawerLayoutAndroid;

type DrawerLockMode

type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';

type DrawerPosition

type DrawerPosition = 'left' | 'right';

type DrawerState

type DrawerState = 'Idle' | 'Dragging' | 'Settling';

type DrawerType

type DrawerType = 'front' | 'back' | 'slide';

type ExclusiveGesture

type ExclusiveGestureType = InstanceType<typeof ExclusiveGesture>;

type FlatList

type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

type FlingGesture

type FlingGestureType = InstanceType<typeof FlingGesture>;

type FlingGestureHandler

type FlingGestureHandler = typeof FlingGestureHandler;

type FlingGestureHandlerEventPayload

type FlingGestureHandlerEventPayload = {
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
};

type FlingGestureHandlerGestureEvent

type FlingGestureHandlerGestureEvent = GestureEvent<FlingGestureHandlerEventPayload>;

type FlingGestureHandlerProperties

type FlingGestureHandlerProperties = FlingGestureHandlerProps;

type FlingGestureHandlerStateChangeEvent

type FlingGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;

type ForceTouchGesture

type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;

type ForceTouchGestureChangeEventPayload

type ForceTouchGestureChangeEventPayload = {
    forceChange: number;
};

type ForceTouchGestureHandler

type ForceTouchGestureHandler = typeof ForceTouchGestureHandler & {
    forceTouchAvailable: boolean;
};

type ForceTouchGestureHandlerEventPayload

type ForceTouchGestureHandlerEventPayload = {
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
    /**
     * The pressure of a touch.
     */
    force: number;
};

type ForceTouchGestureHandlerGestureEvent

type ForceTouchGestureHandlerGestureEvent =
    GestureEvent<ForceTouchGestureHandlerEventPayload>;

type ForceTouchGestureHandlerProperties

type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;

type ForceTouchGestureHandlerStateChangeEvent

type ForceTouchGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;

type GestureHandlerGestureEvent

type GestureHandlerGestureEvent = GestureEvent;

type GestureHandlerGestureEventNativeEvent

type GestureHandlerGestureEventNativeEvent = GestureEventPayload;

type GestureHandlerStateChangeEvent

type GestureHandlerStateChangeEvent = HandlerStateChangeEvent;

type GestureHandlerStateChangeNativeEvent

type GestureHandlerStateChangeNativeEvent = HandlerStateChangeEventPayload;

type GestureStateChangeEvent

type GestureStateChangeEvent<
    GestureStateChangeEventPayloadT = Record<string, unknown>
> = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;

type GestureTouchEvent

type GestureTouchEvent = {
    handlerTag: number;
    numberOfTouches: number;
    state: ValueOf<typeof State>;
    eventType: TouchEventType;
    allTouches: TouchData[];
    changedTouches: TouchData[];
    pointerType: PointerType;
};

type GestureType

type GestureType =
    | BaseGesture<Record<string, unknown>>
    | BaseGesture<Record<string, never>>
    | BaseGesture<TapGestureHandlerEventPayload>
    | BaseGesture<PanGestureHandlerEventPayload>
    | BaseGesture<LongPressGestureHandlerEventPayload>
    | BaseGesture<RotationGestureHandlerEventPayload>
    | BaseGesture<PinchGestureHandlerEventPayload>
    | BaseGesture<FlingGestureHandlerEventPayload>
    | BaseGesture<ForceTouchGestureHandlerEventPayload>
    | BaseGesture<NativeViewGestureHandlerPayload>
    | BaseGesture<HoverGestureHandlerEventPayload>;

type GestureUpdateEvent

type GestureUpdateEvent<GestureEventPayloadT = Record<string, unknown>> =
    GestureEventPayload & GestureEventPayloadT;

type HoverGesture

type HoverGestureType = InstanceType<typeof HoverGesture>;

type LongPressGesture

type LongPressGestureType = InstanceType<typeof LongPressGesture>;

type LongPressGestureHandler

type LongPressGestureHandler = typeof LongPressGestureHandler;

type LongPressGestureHandlerEventPayload

type LongPressGestureHandlerEventPayload = {
    /**
     * X coordinate, expressed in points, of the current position of the pointer
     * (finger or a leading pointer when there are multiple fingers placed)
     * relative to the view attached to the handler.
     */
    x: number;
    /**
     * Y coordinate, expressed in points, of the current position of the pointer
     * (finger or a leading pointer when there are multiple fingers placed)
     * relative to the view attached to the handler.
     */
    y: number;
    /**
     * X coordinate, expressed in points, of the current position of the pointer
     * (finger or a leading pointer when there are multiple fingers placed)
     * relative to the window. It is recommended to use `absoluteX` instead of
     * `x` in cases when the view attached to the handler can be transformed as an
     * effect of the gesture.
     */
    absoluteX: number;
    /**
     * Y coordinate, expressed in points, of the current position of the pointer
     * (finger or a leading pointer when there are multiple fingers placed)
     * relative to the window. It is recommended to use `absoluteY` instead of
     * `y` in cases when the view attached to the handler can be transformed as an
     * effect of the gesture.
     */
    absoluteY: number;
    /**
     * Duration of the long press (time since the start of the event), expressed
     * in milliseconds.
     */
    duration: number;
};

type LongPressGestureHandlerGestureEvent

type LongPressGestureHandlerGestureEvent =
    GestureEvent<LongPressGestureHandlerEventPayload>;

type LongPressGestureHandlerProperties

type LongPressGestureHandlerProperties = LongPressGestureHandlerProps;

type LongPressGestureHandlerStateChangeEvent

type LongPressGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<LongPressGestureHandlerEventPayload>;

type ManualGesture

type ManualGestureType = InstanceType<typeof ManualGesture>;

type NativeGesture

type NativeGestureType = InstanceType<typeof NativeGesture>;

type NativeViewGestureHandler

type NativeViewGestureHandler = typeof NativeViewGestureHandler;

type NativeViewGestureHandlerGestureEvent

type NativeViewGestureHandlerGestureEvent =
    GestureEvent<NativeViewGestureHandlerPayload>;

type NativeViewGestureHandlerPayload

type NativeViewGestureHandlerPayload = {
    /**
     * True if gesture was performed inside of containing view, false otherwise.
     */
    pointerInside: boolean;
};

type NativeViewGestureHandlerProperties

type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;

type NativeViewGestureHandlerStateChangeEvent

type NativeViewGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<NativeViewGestureHandlerPayload>;

type PanGesture

type PanGestureType = InstanceType<typeof PanGesture>;

type PanGestureChangeEventPayload

type PanGestureChangeEventPayload = {
    changeX: number;
    changeY: number;
};

type PanGestureHandler

type PanGestureHandler = typeof PanGestureHandler;

type PanGestureHandlerEventPayload

type PanGestureHandlerEventPayload = {
    /**
     * X coordinate of the current position of the pointer (finger or a leading
     * pointer when there are multiple fingers placed) relative to the view
     * attached to the handler. Expressed in point units.
     */
    x: number;
    /**
     * Y coordinate of the current position of the pointer (finger or a leading
     * pointer when there are multiple fingers placed) relative to the view
     * attached to the handler. Expressed in point units.
     */
    y: number;
    /**
     * X coordinate of the current position of the pointer (finger or a leading
     * pointer when there are multiple fingers placed) relative to the window.
     * The value is expressed in point units. It is recommended to use it instead
     * of `x` in cases when the original view can be transformed as an effect of
     * the gesture.
     */
    absoluteX: number;
    /**
     * Y coordinate of the current position of the pointer (finger or a leading
     * pointer when there are multiple fingers placed) relative to the window.
     * The value is expressed in point units. It is recommended to use it instead
     * of `y` in cases when the original view can be transformed as an
     * effect of the gesture.
     */
    absoluteY: number;
    /**
     * Translation of the pan gesture along X axis accumulated over the time of
     * the gesture. The value is expressed in the point units.
     */
    translationX: number;
    /**
     * Translation of the pan gesture along Y axis accumulated over the time of
     * the gesture. The value is expressed in the point units.
     */
    translationY: number;
    /**
     * Velocity of the pan gesture along the X axis in the current moment. The
     * value is expressed in point units per second.
     */
    velocityX: number;
    /**
     * Velocity of the pan gesture along the Y axis in the current moment. The
     * value is expressed in point units per second.
     */
    velocityY: number;
    /**
     * Object containing additional stylus data.
     */
    stylusData: StylusData | undefined;
};

type PanGestureHandlerGestureEvent

type PanGestureHandlerGestureEvent = GestureEvent<PanGestureHandlerEventPayload>;

type PanGestureHandlerProperties

type PanGestureHandlerProperties = PanGestureHandlerProps;

type PanGestureHandlerStateChangeEvent

type PanGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<PanGestureHandlerEventPayload>;

type PinchGesture

type PinchGestureType = InstanceType<typeof PinchGesture>;

type PinchGestureChangeEventPayload

type PinchGestureChangeEventPayload = {
    scaleChange: number;
};

type PinchGestureHandler

type PinchGestureHandler = typeof PinchGestureHandler;

type PinchGestureHandlerEventPayload

type PinchGestureHandlerEventPayload = {
    /**
     * The scale factor relative to the points of the two touches in screen
     * coordinates.
     */
    scale: number;
    /**
     * Position expressed in points along X axis of center anchor point of
     * gesture.
     */
    focalX: number;
    /**
     * Position expressed in points along Y axis of center anchor point of
     * gesture.
     */
    focalY: number;
    /**
     *
     * Velocity of the pan gesture the current moment. The value is expressed in
     * point units per second.
     */
    velocity: number;
};

type PinchGestureHandlerGestureEvent

type PinchGestureHandlerGestureEvent = GestureEvent<PinchGestureHandlerEventPayload>;

type PinchGestureHandlerProperties

type PinchGestureHandlerProperties = PinchGestureHandlerProps;

type PinchGestureHandlerStateChangeEvent

type PinchGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<PinchGestureHandlerEventPayload>;

type RaceGesture

type RaceGestureType = ComposedGestureType;

type RawButtonProperties

type RawButtonProperties = RawButtonProps;

type RectButtonProperties

type RectButtonProperties = RectButtonProps;

type RefreshControl

type RefreshControl = typeof RefreshControl & RNRefreshControl;

type RotationGesture

type RotationGestureType = InstanceType<typeof RotationGesture>;

type RotationGestureHandler

type RotationGestureHandler = typeof RotationGestureHandler;

type RotationGestureHandlerEventPayload

type RotationGestureHandlerEventPayload = {
    /**
     * Amount rotated, expressed in radians, from the gesture's focal point
     * (anchor).
     */
    rotation: number;
    /**
     * X coordinate, expressed in points, of the gesture's central focal point
     * (anchor).
     */
    anchorX: number;
    /**
     * Y coordinate, expressed in points, of the gesture's central focal point
     * (anchor).
     */
    anchorY: number;
    /**
     *
     * Instantaneous velocity, expressed in point units per second, of the
     * gesture.
     */
    velocity: number;
};

type RotationGestureHandlerGestureEvent

type RotationGestureHandlerGestureEvent =
    GestureEvent<RotationGestureHandlerEventPayload>;

type RotationGestureHandlerProperties

type RotationGestureHandlerProperties = RotationGestureHandlerProps;

type RotationGestureHandlerStateChangeEvent

type RotationGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<RotationGestureHandlerEventPayload>;

type ScrollView

type ScrollView = typeof GHScrollView & RNScrollView;

type SimultaneousGesture

type SimultaneousGestureType = InstanceType<typeof SimultaneousGesture>;

type State

type State = (typeof State)[keyof typeof State];

type Switch

type Switch = typeof Switch & RNSwitch;

type TapGesture

type TapGestureType = InstanceType<typeof TapGesture>;

type TapGestureHandler

type TapGestureHandler = typeof TapGestureHandler;

type TapGestureHandlerEventPayload

type TapGestureHandlerEventPayload = {
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
};

type TapGestureHandlerGestureEvent

type TapGestureHandlerGestureEvent = GestureEvent<TapGestureHandlerEventPayload>;

type TapGestureHandlerProperties

type TapGestureHandlerProperties = TapGestureHandlerProps;

type TapGestureHandlerStateChangeEvent

type TapGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<TapGestureHandlerEventPayload>;

type TextInput

type TextInput = typeof TextInput & RNTextInput;

type TouchableHighlightProps

type TouchableHighlightProps = RNTouchableHighlightProps & GenericTouchableProps;

type TouchableOpacityProps

type TouchableOpacityProps = RNTouchableOpacityProps &
    GenericTouchableProps & {
        useNativeAnimations?: boolean;
    };

type TouchableWithoutFeedbackProps

type TouchableWithoutFeedbackProps = GenericTouchableProps;

type TouchData

type TouchData = {
    id: number;
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
};

Package Files (45)

Dependencies (4)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-gesture-handler.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-gesture-handler)

HTML

<a href="https://www.jsdocs.io/package/react-native-gesture-handler"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 8850 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-gesture-handler

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable BaseButton

variable BorderlessButton

variable Directions

variable DrawerLayoutAndroid

variable FlingGestureHandler

variable ForceTouchGestureHandler

variable Gesture

See Also

variable LongPressGestureHandler

variable NativeViewGestureHandler

variable PanGestureHandler

variable PinchGestureHandler

variable PureNativeButton

variable RawButton

variable RectButton

variable RefreshControl

variable RotationGestureHandler

variable ScrollView

variable State

variable Switch

variable TapGestureHandler

variable TextInput

variable TouchableWithoutFeedback

Functions

function createNativeWrapper

function enableExperimentalWebImplementation

function enableLegacyWebImplementation

function FlatList

function GestureDetector

See Also

function gestureHandlerRootHOC

function GestureHandlerRootView

function Pressable

Classes

class DrawerLayout

constructor

property closeDrawer

property defaultProps

property openDrawer

property positions

method render

method shouldComponentUpdate

class Swipeable

Deprecated

constructor

property close

property defaultProps

property openLeft

property openRight

property reset

method render

method shouldComponentUpdate

class TouchableHighlight

constructor

property defaultProps

property hasPressHandler

property hideUnderlay

property onStateChange

property showUnderlay

method render

method renderChildren

class TouchableOpacity

property defaultProps

property getChildStyleOpacityWithDefault

property onStateChange

property opacity

property setOpacityTo

method render

Interfaces