react-native-gesture-handler

react-native-gesture-handler

Version 3.0.0
Published 2 days ago
2.85 MB
2 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 Directions

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

variable FlingGestureHandler

const FlingGestureHandler: any;

Deprecated
FlingGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Fling() instead.

variable ForceTouchGestureHandler

const ForceTouchGestureHandler: any;

Deprecated
ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.ForceTouch() instead.

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

See Also
- https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture
Deprecated
Gesture builder API is deprecated and will be removed in a future version of Gesture Handler. Please migrate to the new, hook-based API.
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.

variable GestureStateManager

const GestureStateManager: GestureStateManagerType;

variable LegacyDrawerLayoutAndroid

const LegacyDrawerLayoutAndroid: {
    (
        props: RNDrawerLayoutAndroidProps & {
            children?: React.ReactNode | undefined;
        } & NativeViewGestureHandlerProps & {
                ref?: React.Ref<React.ComponentType<any> | null> | undefined;
            }
    ): React.JSX.Element;
    displayName: any;
};

Deprecated
use DrawerLayoutAndroid instead

variable LegacyRefreshControl

const LegacyRefreshControl: {
    (
        props: import('react-native').RefreshControlProps &
            NativeViewGestureHandlerProps & {
                ref?: React.Ref<React.ComponentType<any> | null> | undefined;
            }
    ): React.JSX.Element;
    displayName: any;
};

Deprecated
use RefreshControl instead

variable LegacySwitch

const LegacySwitch: {
    (
        props: RNSwitchProps &
            NativeViewGestureHandlerProps & {
                ref?: React.Ref<React.ComponentType<any> | null> | undefined;
            }
    ): React.JSX.Element;
    displayName: any;
};

Deprecated
use Switch instead

variable LegacyTextInput

const LegacyTextInput: {
    (
        props: RNTextInputProps &
            NativeViewGestureHandlerProps & {
                ref?: React.Ref<React.ComponentType<any> | null> | undefined;
            }
    ): React.JSX.Element;
    displayName: any;
};

Deprecated
use RefreshControl instead

variable LongPressGestureHandler

const LongPressGestureHandler: any;

Deprecated
LongPressGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.LongPress() instead.

variable NativeViewGestureHandler

const NativeViewGestureHandler: any;

Deprecated
NativeViewGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Native() instead.

variable PanGestureHandler

const PanGestureHandler: any;

Deprecated
PanGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pan() instead.

variable PinchGestureHandler

const PinchGestureHandler: any;

Deprecated
PinchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pinch() instead.

variable RefreshControl

const RefreshControl: {
    (
        props: RNRefreshControlProps & {
            disableReanimated?: boolean | undefined;
            useAnimated?: boolean | undefined;
            testID?: string | undefined;
        } & {
            runOnJS?: boolean | import('../types').SharedValue<boolean> | undefined;
            enabled?: boolean | import('../types').SharedValue<boolean> | undefined;
            shouldCancelWhenOutside?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            hitSlop?:
                | number
                | import('../types').SharedValue<number>
                | import('../types').SharedValue<null>
                | {
                      left?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      right?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      top?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      bottom?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      vertical?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      horizontal?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                  }
                | {
                      left: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      right: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      top: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | {
                      bottom: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | null
                | undefined;
            activeCursor?:
                | import('../..').ActiveCursor
                | import('../types').SharedValue<import('../..').ActiveCursor>
                | undefined;
            mouseButton?:
                | import('../..').MouseButton
                | import('../types').SharedValue<import('../..').MouseButton>
                | undefined;
            cancelsTouchesInView?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            cancelsJSResponder?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            manualActivation?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
        } & import('../types').GestureCallbacks<
                import('../hooks/gestures/native/NativeTypes').NativeHandlerData
            > &
            import('../hooks/gestures/native/NativeTypes').NativeGestureNativeProperties &
            import('../types').ExternalRelations &
            import('../types/NativeWrapperType').WrapperSpecificProperties<RNRefreshControl | null>
    ): React.JSX.Element;
    displayName: any;
};

variable RotationGestureHandler

const RotationGestureHandler: any;

Deprecated
RotationGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Rotation() instead.

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: {
    (
        props: RNSwitchProps & {
            disableReanimated?: boolean | undefined;
            useAnimated?: boolean | undefined;
            testID?: string | undefined;
        } & {
            runOnJS?: boolean | import('../types').SharedValue<boolean> | undefined;
            enabled?: boolean | import('../types').SharedValue<boolean> | undefined;
            shouldCancelWhenOutside?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            hitSlop?:
                | number
                | import('../types').SharedValue<number>
                | import('../types').SharedValue<null>
                | {
                      left?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      right?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      top?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      bottom?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      vertical?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      horizontal?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                  }
                | {
                      left: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      right: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      top: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | {
                      bottom: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | null
                | undefined;
            activeCursor?:
                | import('../..').ActiveCursor
                | import('../types').SharedValue<import('../..').ActiveCursor>
                | undefined;
            mouseButton?:
                | import('../..').MouseButton
                | import('../types').SharedValue<import('../..').MouseButton>
                | undefined;
            cancelsTouchesInView?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            cancelsJSResponder?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            manualActivation?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
        } & import('../types').GestureCallbacks<
                import('../hooks/gestures/native/NativeTypes').NativeHandlerData
            > &
            import('../hooks/gestures/native/NativeTypes').NativeGestureNativeProperties &
            import('../types').ExternalRelations &
            import('../types/NativeWrapperType').WrapperSpecificProperties<RNSwitch | null>
    ): React.JSX.Element;
    displayName: any;
};

variable TapGestureHandler

const TapGestureHandler: any;

Deprecated
TapGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Tap() instead.

variable TextInput

const TextInput: {
    (
        props: RNTextInputProps & {
            disableReanimated?: boolean | undefined;
            useAnimated?: boolean | undefined;
            testID?: string | undefined;
        } & {
            runOnJS?: boolean | import('../types').SharedValue<boolean> | undefined;
            enabled?: boolean | import('../types').SharedValue<boolean> | undefined;
            shouldCancelWhenOutside?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            hitSlop?:
                | number
                | import('../types').SharedValue<number>
                | import('../types').SharedValue<null>
                | {
                      left?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      right?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      top?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      bottom?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      vertical?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                      horizontal?:
                          | number
                          | import('../types').SharedValue<number>
                          | undefined;
                  }
                | {
                      left: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      right: number | import('../types').SharedValue<number>;
                      width: number | import('../types').SharedValue<number>;
                  }
                | {
                      top: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | {
                      bottom: number | import('../types').SharedValue<number>;
                      height: number | import('../types').SharedValue<number>;
                  }
                | null
                | undefined;
            activeCursor?:
                | import('../..').ActiveCursor
                | import('../types').SharedValue<import('../..').ActiveCursor>
                | undefined;
            mouseButton?:
                | import('../..').MouseButton
                | import('../types').SharedValue<import('../..').MouseButton>
                | undefined;
            cancelsTouchesInView?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            cancelsJSResponder?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
            manualActivation?:
                | boolean
                | import('../types').SharedValue<boolean>
                | undefined;
        } & import('../types').GestureCallbacks<
                import('../hooks/gestures/native/NativeTypes').NativeHandlerData
            > &
            import('../hooks/gestures/native/NativeTypes').NativeGestureNativeProperties &
            import('../types').ExternalRelations &
            import('../types/NativeWrapperType').WrapperSpecificProperties<RNTextInput | null>
    ): React.JSX.Element;
    displayName: any;
};

variable TouchableNativeFeedback

const TouchableNativeFeedback: any;

Deprecated
TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.

Functions

function BaseButton

BaseButton: (props: BaseButtonProps) => React.JSX.Element;

Deprecated
BaseButton is deprecated, use Touchable instead

function BorderlessButton

BorderlessButton: (props: BorderlessButtonProps) => React.JSX.Element;

Deprecated
BorderlessButton is deprecated, use Touchable with activeOpacity={0.3} instead

function FlatList

FlatList: <ItemT = any>(
    props: PropsWithChildren<
        Omit<RNFlatListProps<ItemT>, 'renderScrollComponent' | 'ref'> & {
            disableReanimated?: boolean;
            useAnimated?: boolean;
            testID?: string;
        } & WithSharedValueRecursive<
                {
                    runOnJS?: boolean;
                    enabled?: boolean;
                    shouldCancelWhenOutside?: boolean;
                    hitSlop?: HitSlop;
                    activeCursor?: ActiveCursor;
                    mouseButton?: MouseButton;
                    cancelsTouchesInView?: boolean;
                    cancelsJSResponder?: boolean;
                    manualActivation?: boolean;
                },
                ActiveCursor | MouseButton
            > &
            GestureCallbacks<NativeHandlerData, NativeHandlerData> &
            NativeGestureNativeProperties &
            ExternalRelations &
            WrapperSpecificProperties<any>
    >
) => ReactElement | null;

function GestureDetector

GestureDetector: <
    TConfig,
    THandlerData,
    TExtendedHandlerData extends THandlerData
>(
    props:
        | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
        | LegacyGestureDetectorProps
) => any;

function GestureHandlerRootView

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

function InterceptingGestureDetector

InterceptingGestureDetector: <
    TConfig,
    THandlerData,
    TExtendedHandlerData extends THandlerData
>({
    gesture,
    children,
    touchAction,
    userSelect,
    enableContextMenu,
}: InterceptingGestureDetectorProps<
    TConfig,
    THandlerData,
    TExtendedHandlerData
>) => React.JSX.Element;

function legacy_createNativeWrapper

legacy_createNativeWrapper: <P>(
    Component: React.ComponentType<P>,
    config?: Readonly<NativeViewGestureHandlerProps>
) => {
    (
        props: P &
            NativeViewGestureHandlerProps & {
                ref?: React.Ref<React.ComponentType<any> | null> | undefined;
            }
    ): React.JSX.Element;
    displayName: any;
};

Deprecated
createNativeWrapper is deprecated and will be removed in favor of using GestureDetector with Native gesture directly.

function LegacyBaseButton

LegacyBaseButton: ({
    ref,
    ...props
}: Omit<LegacyBaseButtonProps, 'innerRef'> & {
    ref?: React.Ref<React.ComponentType<any>> | undefined;
}) => React.JSX.Element;

Deprecated
use BaseButton instead

function LegacyBorderlessButton

LegacyBorderlessButton: ({
    ref,
    ...props
}: Omit<LegacyBorderlessButtonProps, 'innerRef'> & {
    ref?: React.Ref<React.ComponentType<any>> | undefined;
}) => React.JSX.Element;

Deprecated
use BorderlessButton instead

function LegacyFlatList

LegacyFlatList: <ItemT>(
    props: PropsWithChildren<
        Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
            NativeViewGestureHandlerProps & { ref?: React.Ref<any> }
    >
) => ReactElement | null;

Deprecated
use FlatList instead

function LegacyPressable

LegacyPressable: (props: LegacyPressableProps) => React.JSX.Element;

Deprecated
LegacyPressable is deprecated, use Pressable instead.

function LegacyRawButton

LegacyRawButton: (
    props: Omit<
        React.ComponentProps<typeof LegacyRawButtonInner>,
        'needsOffscreenAlphaCompositing'
    >
) => React.JSX.Element;

Deprecated
use RawButton instead

function LegacyRectButton

LegacyRectButton: ({
    ref,
    ...props
}: Omit<LegacyRectButtonProps, 'innerRef'> & {
    ref?: React.Ref<React.ComponentType<any>> | undefined;
}) => React.JSX.Element;

Deprecated
use RectButton instead

function LegacyScrollView

LegacyScrollView: (
    props: RNScrollViewProps &
        NativeViewGestureHandlerProps & { ref?: React.Ref<RNScrollView | null> }
) => React.JSX.Element;

Deprecated
use ScrollView instead

function LegacyText

LegacyText: (props: TextProps) => React.JSX.Element;

Deprecated
LegacyText is deprecated. Since Gesture Handler 3, you should wrap Text with GestureDetector, InterceptingGestureDetector, or VirtualGestureDetector.

function Pressable

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

function RawButton

RawButton: (props: RawButtonProps) => React.JSX.Element;

Deprecated
RawButton is deprecated, use Clickable instead

function RectButton

RectButton: (props: RectButtonProps) => React.JSX.Element;

Deprecated
RectButton is deprecated, use Touchable with activeUnderlayOpacity={0.7} instead

function ScrollView

ScrollView: (
    props: RNScrollViewProps & NativeWrapperProperties<RNScrollView | null>
) => React.JSX.Element;

function Touchable

Touchable: (props: TouchableProps) => React.JSX.Element;

function TouchableWithoutFeedback

TouchableWithoutFeedback: ({
    delayLongPress,
    extraButtonProps,
    ...rest
}: PropsWithChildren<TouchableWithoutFeedbackProps> & {
    ref?: React.Ref<GenericTouchable>;
}) => React.JSX.Element;

Deprecated
TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.

function useCompetingGestures

useCompetingGestures: (
    ...gestures: AnyGesture[]
) => import('../../types').ComposedGesture;

function useExclusiveGestures

useExclusiveGestures: (
    ...gestures: AnyGesture[]
) => import('../../types').ComposedGesture;

function useFlingGesture

useFlingGesture: (config?: FlingGestureConfig) => FlingGesture;

function useHoverGesture

useHoverGesture: (config?: HoverGestureConfig) => HoverGesture;

function useLongPressGesture

useLongPressGesture: (config?: LongPressGestureConfig) => LongPressGesture;

function useManualGesture

useManualGesture: (config?: ManualGestureConfig) => ManualGesture;

function useNativeGesture

useNativeGesture: (config?: NativeGestureConfig) => NativeGesture;

function usePanGesture

usePanGesture: (config?: PanGestureConfig) => PanGesture;

function usePinchGesture

usePinchGesture: (config?: PinchGestureConfig) => PinchGesture;

function useRotationGesture

useRotationGesture: (config?: RotationGestureConfig) => RotationGesture;

function useSimultaneousGestures

useSimultaneousGestures: (
    ...gestures: AnyGesture[]
) => import('../../types').ComposedGesture;

function useTapGesture

useTapGesture: (config?: TapGestureConfig) => TapGesture;

function VirtualGestureDetector

VirtualGestureDetector: <
    TConfig,
    THandlerData,
    TExtendedHandlerData extends THandlerData
>(
    props: VirtualDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
) => any;

Classes

class TouchableHighlight

class TouchableHighlight extends Component<TouchableHighlightProps, State> {}

Deprecated
TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
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> {}

Deprecated
TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
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 {}

Deprecated
BaseButtonProps is deprecated, use ClickableProps instead

property delayLongPress

delayLongPress?: number | undefined;

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

property onActiveStateChange

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

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

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

property onPress

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

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

property style

style?: StyleProp<ViewStyle>;

interface BorderlessButtonProps

interface BorderlessButtonProps extends BaseButtonProps {}

Deprecated
BorderlessButtonProps is deprecated, use ClickableProps instead

property activeOpacity

activeOpacity?: number | undefined;

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

interface FlingGestureHandlerProps

interface FlingGestureHandlerProps
    extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
        FlingGestureConfig {}

Deprecated
FlingGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Fling() instead.

interface ForceTouchGestureHandlerProps

interface ForceTouchGestureHandlerProps
    extends BaseGestureHandlerProps<ForceTouchGestureHandlerEventPayload>,
        ForceTouchGestureConfig {}

Deprecated
ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.ForceTouch() instead.

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 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 LegacyBaseButtonProps

interface LegacyBaseButtonProps extends LegacyRawButtonProps {}

Deprecated
use BaseButtonProps with BaseButton instead

property delayLongPress

delayLongPress?: number | undefined;

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

property onActiveStateChange

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

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

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

property onPress

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

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

property style

style?: StyleProp<ViewStyle>;

property testID

testID?: string | undefined;

interface LegacyBorderlessButtonProps

interface LegacyBorderlessButtonProps extends LegacyBaseButtonProps {}

Deprecated
use BorderlessButtonProps with BorderlessButton instead

property activeOpacity

activeOpacity?: number | undefined;

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

interface LegacyGestureStateManager

interface GestureStateManagerType {}

Deprecated
LegacyGestureStateManagerType is deprecated and will be removed in the future. Please use the new, hook-based API instead.

property activate

activate: () => void;

property begin

begin: () => void;

property end

end: () => void;

property fail

fail: () => void;

interface LegacyPressableProps

interface LegacyPressableProps
    extends Omit<CommonPressableProps, 'needsOffscreenAlphaCompositing'> {}

property blocksExternalGesture

blocksExternalGesture?: RelationPropType;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

property requireExternalGestureToFail

requireExternalGestureToFail?: RelationPropType;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

property simultaneousWithExternalGesture

simultaneousWithExternalGesture?: RelationPropType;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

interface LegacyRawButtonProps

interface LegacyRawButtonProps
    extends NativeViewGestureHandlerProps,
        AccessibilityProps {}

Deprecated
use RawButtonProps with RawButton instead

property borderless

borderless?: boolean | undefined;

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

property exclusive

exclusive?: boolean | undefined;

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

property foreground

foreground?: boolean | undefined;

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

property onLayout

onLayout?: (event: LayoutChangeEvent) => void;

Invoked on mount and layout changes.

property rippleColor

rippleColor?: number | ColorValue | null | undefined;

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

property rippleRadius

rippleRadius?: number | null | undefined;

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 testOnly_onLongPress

testOnly_onLongPress?: Function | null | undefined;

Used for testing-library compatibility, not passed to the native component.
Deprecated
test-only props are deprecated and will be removed in the future.

property testOnly_onPress

testOnly_onPress?: Function | null | undefined;

Used for testing-library compatibility, not passed to the native component.
Deprecated
test-only props are deprecated and will be removed in the future.

property testOnly_onPressIn

testOnly_onPressIn?: Function | null | undefined;

Used for testing-library compatibility, not passed to the native component.
Deprecated
test-only props are deprecated and will be removed in the future.

property testOnly_onPressOut

testOnly_onPressOut?: Function | null | undefined;

Used for testing-library compatibility, not passed to the native component.
Deprecated
test-only props are deprecated and will be removed in the future.

property touchSoundDisabled

touchSoundDisabled?: boolean | undefined;

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

interface LegacyRectButtonProps

interface LegacyRectButtonProps extends LegacyBaseButtonProps {}

Deprecated
use RectButtonProps with RectButton instead

property activeOpacity

activeOpacity?: number | undefined;

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

property underlayColor

underlayColor?: string | undefined;

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

interface LongPressGestureHandlerProps

interface LongPressGestureHandlerProps
    extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
        LongPressGestureConfig {}

Deprecated
LongPressGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.LongPress() instead.

interface NativeViewGestureHandlerProps

interface NativeViewGestureHandlerProps
    extends BaseGestureHandlerProps<NativeViewGestureHandlerPayload>,
        NativeViewGestureConfig {}

Deprecated
NativeViewGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Native() instead.

interface PanGestureHandlerProps

interface PanGestureHandlerProps
    extends BaseGestureHandlerProps<PanGestureHandlerEventPayload>,
        CommonPanProperties {}

Deprecated
PanGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pan() instead.

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> {}

Deprecated
PinchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pinch() instead.

interface PressableProps

interface PressableProps extends CommonPressableProps {}

property block

block?: AnyGesture;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

property requireToFail

requireToFail?: AnyGesture;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

property simultaneousWith

simultaneousWith?: AnyGesture;

A gesture object or an array of gesture objects containing the configuration and callbacks to be used with the Pressable's gesture handlers.

interface RawButtonProps

interface RawButtonProps
    extends Omit<
            ButtonProps,
            | 'defaultOpacity'
            | 'defaultScale'
            | 'defaultUnderlayOpacity'
            | 'activeOpacity'
            | 'activeScale'
            | 'activeUnderlayOpacity'
            | 'needsOffscreenAlphaCompositing'
        >,
        Omit<
            NativeWrapperProperties<React.ComponentRef<typeof GestureHandlerButton>>,
            'hitSlop' | 'enabled'
        > {}

Deprecated
RawButtonProps is deprecated, use ClickableProps instead

interface RectButtonProps

interface RectButtonProps extends BaseButtonProps {}

Deprecated
RectButtonProps is deprecated, use ClickableProps instead

property activeOpacity

activeOpacity?: number | undefined;

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

property underlayColor

underlayColor?: string | undefined;

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

interface RotationGestureHandlerProps

interface RotationGestureHandlerProps
    extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}

Deprecated
RotationGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Rotation() instead.

interface TapGestureHandlerProps

interface TapGestureHandlerProps
    extends BaseGestureHandlerProps<TapGestureHandlerEventPayload>,
        TapGestureConfig {}

Deprecated
TapGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Tap() instead.

Enums

enum GestureDetectorType

enum GestureDetectorType {
    Native = 0,
    Virtual = 1,
    Intercepting = 2,
}

member Intercepting

Intercepting = 2

member Native

Native = 0

member Virtual

Virtual = 1

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 ActiveCursor

type ActiveCursor =
    | 'auto'
    | 'default'
    | 'none'
    | 'context-menu'
    | 'help'
    | 'pointer'
    | 'progress'
    | 'wait'
    | 'cell'
    | 'crosshair'
    | 'text'
    | 'vertical-text'
    | 'alias'
    | 'copy'
    | 'move'
    | 'no-drop'
    | 'not-allowed'
    | 'grab'
    | 'grabbing'
    | 'e-resize'
    | 'n-resize'
    | 'ne-resize'
    | 'nw-resize'
    | 's-resize'
    | 'se-resize'
    | 'sw-resize'
    | 'w-resize'
    | 'ew-resize'
    | 'ns-resize'
    | 'nesw-resize'
    | 'nwse-resize'
    | 'col-resize'
    | 'row-resize'
    | 'all-scroll'
    | 'zoom-in'
    | 'zoom-out';

type ComposedGesture

type ComposedGesture = {
    handlerTags: number[];
    type: ComposedGestureName;
    config: ComposedGestureConfig;
    detectorCallbacks: DetectorCallbacks<unknown, unknown>;
    externalSimultaneousHandlers: number[];
    gestures: Gesture[];
};

type Directions

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

type FlatList

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

type FlingGesture

type FlingGesture = SingleGesture<FlingGestureProperties, FlingHandlerData>;

type FlingGestureActiveEvent

type FlingGestureActiveEvent = FlingGestureEvent;

type FlingGestureConfig

type FlingGestureConfig = ExcludeInternalConfigProps<FlingGestureInternalConfig>;

type FlingGestureEvent

type FlingGestureEvent = GestureEvent<FlingHandlerData>;

type FlingGestureHandler

type FlingGestureHandler = typeof FlingGestureHandler;

Deprecated
FlingGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Fling() instead.

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 ForceTouchGestureChangeEventPayload

type ForceTouchGestureChangeEventPayload = {
    forceChange: number;
};

Deprecated
ForceTouchGestureChangeEventPayload is deprecated and will be removed in the future.

type ForceTouchGestureHandler

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

Deprecated
ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.ForceTouch() instead.

type ForceTouchGestureHandlerEventPayload

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

Deprecated
ForceTouch gesture is deprecated and will be removed in the future.

type ForceTouchGestureHandlerGestureEvent

type ForceTouchGestureHandlerGestureEvent =
    GestureEvent<ForceTouchGestureHandlerEventPayload>;

Deprecated
ForceTouchGestureHandler is deprecated and will be removed in the future.

type ForceTouchGestureHandlerProperties

type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;

Deprecated
ForceTouch gesture is deprecated and will be removed in the future.

type ForceTouchGestureHandlerStateChangeEvent

type ForceTouchGestureHandlerStateChangeEvent =
    HandlerStateChangeEvent<ForceTouchGestureHandlerEventPayload>;

Deprecated
ForceTouchGestureHandler is deprecated and will be removed in the future.

type GestureDetectorProps

type GestureDetectorProps<
    TConfig,
    THandlerData,
    TExtendedHandlerData extends THandlerData
> =
    | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
    | InterceptingGestureDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
    | LegacyDetectorProps;

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

Deprecated
GestureType is deprecated and will be removed in the future. Please use SingleGesture instead.

type GestureUpdateEvent

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

type HoverGesture

type HoverGesture = SingleGesture<
    HoverGestureInternalProperties,
    HoverHandlerData,
    HoverExtendedHandlerData
>;

type HoverGestureActiveEvent

type HoverGestureActiveEvent = GestureEvent<HoverExtendedHandlerData>;

type HoverGestureConfig

type HoverGestureConfig = ExcludeInternalConfigProps<
    BaseGestureConfig<
        HoverGestureProperties,
        HoverHandlerData,
        HoverExtendedHandlerData
    >
>;

type HoverGestureEvent

type HoverGestureEvent = GestureEvent<HoverHandlerData>;

type LegacyBaseButtonProperties

type LegacyBaseButtonProperties = LegacyBaseButtonProps;

Deprecated
Use BaseButtonProperties instead

type LegacyBorderlessButtonProperties

type LegacyBorderlessButtonProperties = LegacyBorderlessButtonProps;

Deprecated
Use BorderlessButtonProperties instead

type LegacyComposedGesture

type ComposedGestureType = InstanceType<typeof ComposedGesture>;

Deprecated
ComposedGestureType is deprecated and will be removed in the future. Please use ComposedGesture instead.

type LegacyDrawerLayoutAndroid

type LegacyDrawerLayoutAndroid = typeof LegacyDrawerLayoutAndroid &
    RNDrawerLayoutAndroid;

type LegacyExclusiveGesture

type ExclusiveGestureType = InstanceType<typeof ExclusiveGesture>;

Deprecated
ExclusiveGestureType is deprecated and will be removed in the future. Please use ComposedGesture instead.

type LegacyFlatList

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

type LegacyFlingGesture

type FlingGestureType = InstanceType<typeof FlingGesture>;

Deprecated
FlingGestureType is deprecated and will be removed in the future. Please use FlingGesture instead.

type LegacyForceTouchGesture

type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;

Deprecated
ForceTouchGestureType is deprecated and will be removed in the future.

type LegacyHoverGesture

type HoverGestureType = InstanceType<typeof HoverGesture>;

Deprecated
HoverGestureType is deprecated and will be removed in the future. Please use HoverGesture instead.

type LegacyLongPressGesture

type LongPressGestureType = InstanceType<typeof LongPressGesture>;

Deprecated
LongPressGestureType is deprecated and will be removed in the future. Please use LongPressGesture instead.

type LegacyManualGesture

type ManualGestureType = InstanceType<typeof ManualGesture>;

Deprecated
ManualGestureType is deprecated and will be removed in the future. Please use ManualGesture instead.

type LegacyPanGesture

type PanGestureType = InstanceType<typeof PanGesture>;

Deprecated
PanGestureType is deprecated and will be removed in the future. Please use PanGesture instead.

type LegacyPinchGesture

type PinchGestureType = InstanceType<typeof PinchGesture>;

Deprecated
PinchGestureType is deprecated and will be removed in the future. Please use PinchGesture instead.

type LegacyRaceGesture

type RaceGestureType = ComposedGestureType;

Deprecated
RaceGestureType is deprecated and will be removed in the future. Please use ComposedGesture instead.

type LegacyRawButtonProperties

type LegacyRawButtonProperties = LegacyRawButtonProps;

Deprecated
Use RawButtonProperties instead

type LegacyRectButtonProperties

type LegacyRectButtonProperties = LegacyRectButtonProps;

Deprecated
Use RectButtonProperties instead

type LegacyRefreshControl

type LegacyRefreshControl = typeof LegacyRefreshControl & RNRefreshControl;

type LegacyRotationGesture

type RotationGestureType = InstanceType<typeof RotationGesture>;

Deprecated
RotationGestureType is deprecated and will be removed in the future. Please use RotationGesture instead.

type LegacyScrollView

type LegacyScrollView = typeof GHScrollView & RNScrollView;

type LegacySimultaneousGesture

type SimultaneousGestureType = InstanceType<typeof SimultaneousGesture>;

Deprecated
SimultaneousGestureType is deprecated and will be removed in the future. Please use ComposedGesture instead.

type LegacySwitch

type LegacySwitch = typeof LegacySwitch & RNSwitch;

type LegacyTapGesture

type TapGestureType = InstanceType<typeof TapGesture>;

Deprecated
TapGestureType is deprecated and will be removed in the future. Please use TapGesture instead.

type LegacyText

type LegacyText = typeof LegacyText & RNText;

Deprecated
LegacyText is deprecated. Since Gesture Handler 3, you should wrap Text with GestureDetector, InterceptingGestureDetector, or VirtualGestureDetector.

type LegacyTextInput

type LegacyTextInput = typeof LegacyTextInput & RNTextInput;

type LongPressGesture

type LongPressGesture = SingleGesture<
    LongPressGestureProperties,
    LongPressHandlerData
>;

type LongPressGestureActiveEvent

type LongPressGestureActiveEvent = LongPressGestureEvent;

type LongPressGestureConfig

type LongPressGestureConfig = ExcludeInternalConfigProps<
    BaseDiscreteGestureConfig<LongPressGestureProperties, LongPressHandlerData>
>;

type LongPressGestureEvent

type LongPressGestureEvent = GestureEvent<LongPressHandlerData>;

type LongPressGestureHandler

type LongPressGestureHandler = typeof LongPressGestureHandler;

Deprecated
LongPressGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.LongPress() instead.

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 ManualGesture = SingleGesture<ManualGestureProperties, ManualHandlerData>;

type ManualGestureActiveEvent

type ManualGestureActiveEvent = ManualGestureEvent;

type ManualGestureConfig

type ManualGestureConfig = ExcludeInternalConfigProps<ManualGestureInternalConfig>;

type ManualGestureEvent

type ManualGestureEvent = GestureEvent<ManualHandlerData>;

type NativeGesture

type NativeGesture = SingleGesture<NativeGestureProperties, NativeHandlerData>;

type NativeGestureActiveEvent

type NativeGestureActiveEvent = NativeGestureEvent;

type NativeGestureConfig

type NativeGestureConfig = ExcludeInternalConfigProps<NativeGestureInternalConfig>;

type NativeGestureEvent

type NativeGestureEvent = GestureEvent<NativeHandlerData>;

type NativeViewGestureHandler

type NativeViewGestureHandler = typeof NativeViewGestureHandler;

Deprecated
NativeViewGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Native() instead.

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 PanGesture = SingleGesture<
    PanGestureInternalProperties,
    PanHandlerData,
    PanExtendedHandlerData
>;

type PanGestureActiveEvent

type PanGestureActiveEvent = GestureEvent<PanExtendedHandlerData>;

type PanGestureChangeEventPayload

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

Deprecated
PanGestureChangeEventPayload is deprecated and will be removed in the future. Please use PanGestureActiveEvent instead.

type PanGestureConfig

type PanGestureConfig = ExcludeInternalConfigProps<
    BaseGestureConfig<PanGestureProperties, PanHandlerData, PanExtendedHandlerData>
>;

type PanGestureEvent

type PanGestureEvent = GestureEvent<PanHandlerData>;

type PanGestureHandler

type PanGestureHandler = typeof PanGestureHandler;

Deprecated
PanGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pan() instead.

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 PinchGesture = SingleGesture<
    PinchGestureProperties,
    PinchHandlerData,
    PinchExtendedHandlerData
>;

type PinchGestureActiveEvent

type PinchGestureActiveEvent = GestureEvent<PinchExtendedHandlerData>;

type PinchGestureChangeEventPayload

type PinchGestureChangeEventPayload = {
    scaleChange: number;
};

Deprecated
PinchGestureChangeEventPayload is deprecated and will be removed in the future. Please use PinchGestureActiveEvent instead.

type PinchGestureConfig

type PinchGestureConfig = ExcludeInternalConfigProps<PinchGestureInternalConfig>;

type PinchGestureEvent

type PinchGestureEvent = GestureEvent<PinchHandlerData>;

type PinchGestureHandler

type PinchGestureHandler = typeof PinchGestureHandler;

Deprecated
PinchGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Pinch() instead.

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 PressableStateCallbackType

type PressableStateCallbackType = RNPressableStateCallbackType;

type RefreshControl

type RefreshControl = typeof RefreshControl & RNRefreshControl;

type RotationGesture

type RotationGesture = SingleGesture<
    RotationGestureProperties,
    RotationHandlerData,
    RotationExtendedHandlerData
>;

type RotationGestureActiveEvent

type RotationGestureActiveEvent = GestureEvent<RotationExtendedHandlerData>;

type RotationGestureConfig

type RotationGestureConfig =
    ExcludeInternalConfigProps<RotationGestureInternalConfig>;

type RotationGestureEvent

type RotationGestureEvent = GestureEvent<RotationHandlerData>;

type RotationGestureHandler

type RotationGestureHandler = typeof RotationGestureHandler;

Deprecated
RotationGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Rotation() instead.

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 ScrollView & RNScrollView;

type SingleGesture

type SingleGesture =
    | TapGesture
    | FlingGesture
    | LongPressGesture
    | PinchGesture
    | RotationGesture
    | HoverGesture
    | ManualGesture
    | NativeGesture
    | PanGesture;

type SingleGestureEvent

type SingleGestureEvent =
    | TapGestureEvent
    | TapGestureActiveEvent
    | FlingGestureEvent
    | FlingGestureActiveEvent
    | LongPressGestureEvent
    | LongPressGestureActiveEvent
    | RotationGestureEvent
    | RotationGestureActiveEvent
    | HoverGestureEvent
    | HoverGestureActiveEvent
    | ManualGestureEvent
    | ManualGestureActiveEvent
    | NativeGestureEvent
    | NativeGestureActiveEvent
    | PanGestureEvent
    | PanGestureActiveEvent;

type SingleGestureTouchEvent

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

type State

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

type Switch

type Switch = typeof Switch & RNSwitch;

type TapGesture

type TapGesture = DiscreteSingleGesture<
    TapGestureInternalProperties,
    TapHandlerData
>;

type TapGestureActiveEvent

type TapGestureActiveEvent = TapGestureEvent;

type TapGestureConfig

type TapGestureConfig = ExcludeInternalConfigProps<
    BaseDiscreteGestureConfig<TapGestureProperties, TapHandlerData>
>;

type TapGestureEvent

type TapGestureEvent = GestureEvent<TapHandlerData>;

type TapGestureHandler

type TapGestureHandler = typeof TapGestureHandler;

Deprecated
TapGestureHandler will be removed in the future version of Gesture Handler. Use Gesture.Tap() instead.

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;

Deprecated
TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.

type TouchableOpacityProps

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

Deprecated
TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.

type TouchableProps

type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled' | DurationProps> &
    Omit<
        BaseButtonProps,
        keyof RawButtonProps | 'onActiveStateChange' | 'onPress'
    > & {
        /**
         * Press and hover animation durations, in milliseconds. Pass a single
         * number to apply it to every phase, or an object to customize per phase
         * and per category. Defaults to 50ms for the in phase and 100ms for the
         * out phase.
         */
        animationDuration?: AnimationDuration | undefined;
        /**
         * Configuration for the ripple effect on Android.
         */
        androidRipple?: PressableAndroidRippleConfig | undefined;
        /**
         * Called when the component gets pressed.
         */
        onPress?: ((event: CallbackEventType) => void) | undefined;
        /**
         * Called when pointer touches the component.
         */
        onPressIn?: ((event: CallbackEventType) => void) | undefined;
        /**
         * Called when pointer is released from the component.
         */
        onPressOut?: ((event: CallbackEventType) => void) | undefined;
        /**
         * Whether the component should ignore touches. By default set to false.
         */
        disabled?: boolean | undefined;
        /**
         * Whether the touch should be canceled when pointer leaves the component. By default set to true.
         * On web this prop doesn't have any effect and behaves as if `true` was set.
         */
        cancelOnLeave?: boolean | undefined;
    };

type TouchableWithoutFeedbackProps

type TouchableWithoutFeedbackProps = GenericTouchableProps;

Deprecated
TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.

type TouchData

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

Package Files (74)

Dependencies (2)

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 just now.
Package analyzed in 9640 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 Directions

variable FlingGestureHandler

Deprecated

variable ForceTouchGestureHandler

Deprecated

variable Gesture

See Also

Deprecated

variable GestureStateManager

variable LegacyDrawerLayoutAndroid

Deprecated

variable LegacyRefreshControl

Deprecated

variable LegacySwitch

Deprecated

variable LegacyTextInput

Deprecated

variable LongPressGestureHandler

Deprecated

variable NativeViewGestureHandler

Deprecated

variable PanGestureHandler

Deprecated

variable PinchGestureHandler

Deprecated

variable RefreshControl

variable RotationGestureHandler

Deprecated

variable State

variable Switch

variable TapGestureHandler

Deprecated

variable TextInput

variable TouchableNativeFeedback

Deprecated

Functions

function BaseButton

Deprecated

function BorderlessButton

Deprecated

function FlatList

function GestureDetector

function GestureHandlerRootView

function InterceptingGestureDetector

function legacy_createNativeWrapper

Deprecated

function LegacyBaseButton

Deprecated

function LegacyBorderlessButton

Deprecated

function LegacyFlatList

Deprecated

function LegacyPressable

Deprecated

function LegacyRawButton

Deprecated

function LegacyRectButton

Deprecated

function LegacyScrollView

Deprecated

function LegacyText

Deprecated

function Pressable

function RawButton

Deprecated

function RectButton

Deprecated

function ScrollView

function Touchable