react-native-gesture-handler

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;

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;

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;

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;

property delayLongPress

delayLongPress?: number;

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

property onActiveStateChange

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

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

property onLongPress

onLongPress?: () => void;

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

property onPress

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

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

property style

style?: StyleProp<ViewStyle>;

property testID

testID?: string;

property activeOpacity

activeOpacity?: number;

• iOS only.

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

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'

property nativeEvent

nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;

property handlerTag

handlerTag: number;

property numberOfPointers

numberOfPointers: number;

property pointerType

pointerType: PointerType;

property state

state: ValueOf<typeof State>;

property activate

activate: () => void;

property begin

begin: () => void;

property end

end: () => void;

property fail

fail: () => void;

property nativeEvent

nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;

property oldState

oldState: ValueOf<typeof State>;

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.

property android_disableSound

android_disableSound?: null | boolean;

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

property android_ripple

android_ripple?: null | PressableAndroidRippleConfig;

• Enables the Android ripple effect and configures its color. android

property cancelable

cancelable?: null | boolean;

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

property children

children?:
    | React.ReactNode
    | ((state: PressableStateCallbackType) => React.ReactNode);

• Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.

property delayHoverIn

delayHoverIn?: number | null;

• Duration to wait after hover in before calling onHoverIn. web macos

  NOTE: not present in RN docs

property delayHoverOut

delayHoverOut?: number | null;

• Duration to wait after hover out before calling onHoverOut. web macos

  NOTE: not present in RN docs

property delayLongPress

delayLongPress?: null | number;

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

property disabled

disabled?: null | boolean;

• Whether the press behavior is disabled.

property hitSlop

hitSlop?: null | Insets | number;

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

property onHoverIn

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

• Called when the hover is activated to provide visual feedback.

property onHoverOut

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

• Called when the hover is deactivated to undo visual feedback.

property onLongPress

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

• Called when a long-tap gesture is detected.

property onPress

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

• Called when a single tap gesture is detected.

property onPressIn

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

• Called when a touch is engaged before onPress.

property onPressOut

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

• Called when a touch is released before onPress.

property pressRetentionOffset

pressRetentionOffset?: null | Insets | number;

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

property style

style?:
    | StyleProp<ViewStyle>
    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);

• Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

property testOnly_pressed

testOnly_pressed?: null | boolean;

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

property unstable_pressDelay

unstable_pressDelay?: number;

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

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?: number | ColorValue | null;

• 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 testOnly_onLongPress

testOnly_onLongPress?: Function | null;

• Used for testing-library compatibility, not passed to the native component.

property testOnly_onPress

testOnly_onPress?: Function | null;

• Used for testing-library compatibility, not passed to the native component.

property testOnly_onPressIn

testOnly_onPressIn?: Function | null;

• Used for testing-library compatibility, not passed to the native component.

property testOnly_onPressOut

testOnly_onPressOut?: Function | null;

• Used for testing-library compatibility, not passed to the native component.

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.

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.

property animationOptions

animationOptions?: Record<string, unknown>;

property childrenContainerStyle

childrenContainerStyle?: StyleProp<ViewStyle>;

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

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

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

property dragOffsetFromLeftEdge

dragOffsetFromLeftEdge?: number;

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

property dragOffsetFromRightEdge

dragOffsetFromRightEdge?: number;

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

property enableTrackpadTwoFingerGesture

enableTrackpadTwoFingerGesture?: boolean;

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

property friction

friction?: number;

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

property leftThreshold

leftThreshold?: number;

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

property onSwipeableClose

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

• Called when action panel is closed.

property onSwipeableCloseStartDrag

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

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

property onSwipeableLeftOpen

onSwipeableLeftOpen?: () => void;

• Deprecated

  Use direction argument of onSwipeableOpen()

  Called when left action panel gets open.

property onSwipeableLeftWillOpen

onSwipeableLeftWillOpen?: () => void;

• Deprecated

  Use direction argument of onSwipeableWillOpen()

  Called when left action panel starts animating on open.

property onSwipeableOpen

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

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

property onSwipeableOpenStartDrag

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

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

property onSwipeableRightOpen

onSwipeableRightOpen?: () => void;

• Deprecated

  Use direction argument of onSwipeableOpen()

  Called when right action panel gets open.

property onSwipeableRightWillOpen

onSwipeableRightWillOpen?: () => void;

• Deprecated

  Use direction argument of onSwipeableWillOpen()

  Called when right action panel starts animating on open.

property onSwipeableWillClose

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

• Called when action panel starts animating on close.

property onSwipeableWillOpen

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

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

property overshootFriction

overshootFriction?: number;

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

property overshootLeft

overshootLeft?: boolean;

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

property overshootRight

overshootRight?: boolean;

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

property renderLeftActions

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

• This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue]

  progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]

  To support rtl flexbox layouts use flexDirection styling.

property renderRightActions

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

• This map describes the values to use as inputRange for extra interpolation: AnimatedValue: [startValue, endValue]

  progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]

  To support rtl flexbox layouts use flexDirection styling.

property rightThreshold

rightThreshold?: number;

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

property useNativeAnimations

useNativeAnimations?: boolean;

member HIGHLIGHT

HIGHLIGHT = 2

member LIFT

LIFT = 1

member NONE

NONE = 0

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

member KEY

KEY = 3

member MOUSE

MOUSE = 2

member OTHER

OTHER = 4

member STYLUS

STYLUS = 1

member TOUCH

TOUCH = 0