react-native-gesture-handler
- Version 2.18.1
- Published
- 3.84 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
Experimental implementation of a new declarative API for gesture handling in react-native
Index
Variables
- BaseButton
- BorderlessButton
- Directions
- DrawerLayoutAndroid
- FlingGestureHandler
- ForceTouchGestureHandler
- Gesture
- LongPressGestureHandler
- NativeViewGestureHandler
- PanGestureHandler
- PinchGestureHandler
- PureNativeButton
- RawButton
- RectButton
- RefreshControl
- RotationGestureHandler
- ScrollView
- State
- Switch
- TapGestureHandler
- TextInput
- TouchableWithoutFeedback
Functions
Classes
Interfaces
DrawerLayoutProps
- activeCursor
- children
- contentContainerStyle
- drawerBackgroundColor
- drawerContainerStyle
- drawerLockMode
- drawerPosition
- drawerType
- drawerWidth
- edgeWidth
- enableContextMenu
- enableTrackpadTwoFingerGesture
- hideStatusBar
- keyboardDismissMode
- minSwipeDistance
- mouseButton
- onDrawerClose
- onDrawerOpen
- onDrawerSlide
- onDrawerStateChanged
- onGestureRef
- overlayColor
- renderNavigationView
- statusBarAnimation
- useNativeAnimations
- userSelect
SwipeableProps
- animationOptions
- childrenContainerStyle
- containerStyle
- dragOffsetFromLeftEdge
- dragOffsetFromRightEdge
- enableTrackpadTwoFingerGesture
- friction
- leftThreshold
- onSwipeableClose
- onSwipeableCloseStartDrag
- onSwipeableLeftOpen
- onSwipeableLeftWillOpen
- onSwipeableOpen
- onSwipeableOpenStartDrag
- onSwipeableRightOpen
- onSwipeableRightWillOpen
- onSwipeableWillClose
- onSwipeableWillOpen
- overshootFriction
- overshootLeft
- overshootRight
- renderLeftActions
- renderRightActions
- rightThreshold
- useNativeAnimations
Enums
Type Aliases
- BaseButtonProperties
- BorderlessButtonProperties
- ComposedGesture
- Directions
- DrawerKeyboardDismissMode
- DrawerLayoutAndroid
- DrawerLockMode
- DrawerPosition
- DrawerState
- DrawerType
- ExclusiveGesture
- FlatList
- FlingGesture
- FlingGestureHandler
- FlingGestureHandlerEventPayload
- FlingGestureHandlerGestureEvent
- FlingGestureHandlerProperties
- FlingGestureHandlerStateChangeEvent
- ForceTouchGesture
- ForceTouchGestureChangeEventPayload
- ForceTouchGestureHandler
- ForceTouchGestureHandlerEventPayload
- ForceTouchGestureHandlerGestureEvent
- ForceTouchGestureHandlerProperties
- ForceTouchGestureHandlerStateChangeEvent
- GestureHandlerGestureEvent
- GestureHandlerGestureEventNativeEvent
- GestureHandlerStateChangeEvent
- GestureHandlerStateChangeNativeEvent
- GestureStateChangeEvent
- GestureTouchEvent
- GestureType
- GestureUpdateEvent
- HoverGesture
- LongPressGesture
- LongPressGestureHandler
- LongPressGestureHandlerEventPayload
- LongPressGestureHandlerGestureEvent
- LongPressGestureHandlerProperties
- LongPressGestureHandlerStateChangeEvent
- ManualGesture
- NativeGesture
- NativeViewGestureHandler
- NativeViewGestureHandlerGestureEvent
- NativeViewGestureHandlerPayload
- NativeViewGestureHandlerProperties
- NativeViewGestureHandlerStateChangeEvent
- PanGesture
- PanGestureChangeEventPayload
- PanGestureHandler
- PanGestureHandlerEventPayload
- PanGestureHandlerGestureEvent
- PanGestureHandlerProperties
- PanGestureHandlerStateChangeEvent
- PinchGesture
- PinchGestureChangeEventPayload
- PinchGestureHandler
- PinchGestureHandlerEventPayload
- PinchGestureHandlerGestureEvent
- PinchGestureHandlerProperties
- PinchGestureHandlerStateChangeEvent
- RaceGesture
- RawButtonProperties
- RectButtonProperties
- RefreshControl
- RotationGesture
- RotationGestureHandler
- RotationGestureHandlerEventPayload
- RotationGestureHandlerGestureEvent
- RotationGestureHandlerProperties
- RotationGestureHandlerStateChangeEvent
- ScrollView
- SimultaneousGesture
- State
- Switch
- TapGesture
- TapGestureHandler
- TapGestureHandlerEventPayload
- TapGestureHandlerGestureEvent
- TapGestureHandlerProperties
- TapGestureHandlerStateChangeEvent
- TextInput
- TouchableHighlightProps
- TouchableOpacityProps
- TouchableWithoutFeedbackProps
- TouchData
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
inTouchableHighlight
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 {}
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 ifp
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 ifp
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 ifp
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 ifp
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 macosNOTE: not present in RN docs
property delayHoverOut
delayHoverOut?: number | null;
Duration to wait after hover out before calling
onHoverOut
. web macosNOTE: not present in RN docs
property delayLongPress
delayLongPress?: null | number;
Duration (in milliseconds) from
onPressIn
beforeonLongPress
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 applyflex: 1
property containerStyle
containerStyle?: StyleProp<ViewStyle>;
Style object for the container (
Animated.View
), for example to overrideoverflow: '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 useflexDirection
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 useflexDirection
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,}
enum MouseButton
enum MouseButton { LEFT = 1, RIGHT = 2, MIDDLE = 4, BUTTON_4 = 8, BUTTON_5 = 16, ALL = 31,}
enum PointerType
enum PointerType { TOUCH = 0, STYLUS = 1, MOUSE = 2, OTHER = 3,}
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>;
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;};
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)
- lib/typescript/Directions.d.ts
- lib/typescript/EnableNewWebImplementation.d.ts
- lib/typescript/PointerType.d.ts
- lib/typescript/State.d.ts
- lib/typescript/components/DrawerLayout.d.ts
- lib/typescript/components/GestureButtons.d.ts
- lib/typescript/components/GestureButtonsProps.d.ts
- lib/typescript/components/GestureComponents.d.ts
- lib/typescript/components/GestureHandlerButton.d.ts
- lib/typescript/components/GestureHandlerRootView.d.ts
- lib/typescript/components/Pressable/Pressable.d.ts
- lib/typescript/components/Pressable/PressableProps.d.ts
- lib/typescript/components/Swipeable.d.ts
- lib/typescript/components/gestureHandlerRootHOC.d.ts
- lib/typescript/components/touchables/TouchableHighlight.d.ts
- lib/typescript/components/touchables/TouchableOpacity.d.ts
- lib/typescript/components/touchables/TouchableWithoutFeedback.d.ts
- lib/typescript/handlers/FlingGestureHandler.d.ts
- lib/typescript/handlers/ForceTouchGestureHandler.d.ts
- lib/typescript/handlers/GestureHandlerEventPayload.d.ts
- lib/typescript/handlers/LongPressGestureHandler.d.ts
- lib/typescript/handlers/NativeViewGestureHandler.d.ts
- lib/typescript/handlers/PanGestureHandler.d.ts
- lib/typescript/handlers/PinchGestureHandler.d.ts
- lib/typescript/handlers/RotationGestureHandler.d.ts
- lib/typescript/handlers/TapGestureHandler.d.ts
- lib/typescript/handlers/createNativeWrapper.d.ts
- lib/typescript/handlers/gestureHandlerCommon.d.ts
- lib/typescript/handlers/gestureHandlerTypesCompat.d.ts
- lib/typescript/handlers/gestures/GestureDetector/index.d.ts
- lib/typescript/handlers/gestures/flingGesture.d.ts
- lib/typescript/handlers/gestures/forceTouchGesture.d.ts
- lib/typescript/handlers/gestures/gesture.d.ts
- lib/typescript/handlers/gestures/gestureComposition.d.ts
- lib/typescript/handlers/gestures/gestureObjects.d.ts
- lib/typescript/handlers/gestures/gestureStateManager.d.ts
- lib/typescript/handlers/gestures/hoverGesture.d.ts
- lib/typescript/handlers/gestures/longPressGesture.d.ts
- lib/typescript/handlers/gestures/manualGesture.d.ts
- lib/typescript/handlers/gestures/nativeGesture.d.ts
- lib/typescript/handlers/gestures/panGesture.d.ts
- lib/typescript/handlers/gestures/pinchGesture.d.ts
- lib/typescript/handlers/gestures/rotationGesture.d.ts
- lib/typescript/handlers/gestures/tapGesture.d.ts
- lib/typescript/index.d.ts
Dependencies (4)
Dev Dependencies (37)
- @babel/core
- @babel/plugin-proposal-class-properties
- @babel/preset-env
- @babel/preset-typescript
- @babel/runtime
- @react-native/babel-preset
- @testing-library/jest-native
- @testing-library/react-native
- @types/hammerjs
- @types/hoist-non-react-statics
- @types/jest
- @types/react
- @types/react-test-renderer
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- babel-jest
- clang-format
- eslint
- eslint-config-satya164
- eslint-import-resolver-babel-module
- eslint-plugin-import
- eslint-plugin-jest
- expo
- husky
- jest
- lint-staged
- madge
- prettier
- react
- react-dom
- react-native
- react-native-builder-bob
- react-native-reanimated
- react-native-web
- react-test-renderer
- release-it
- typescript
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 .
Package analyzed in 7075 ms. - Missing or incorrect documentation? Open an issue for this package.