React Native Redash
AnimationsArraysColorsCoordinatesGestureswithOffset()withScaleOffset()onScrollEvent()onGestureEvent()pinchBegan()pinchActive()pinchEnd()panGestureHandler()pinchGestureHandler()tapGestureHandler()HooksMathReadmeRun AnimationsSVGStringsTransformationsTransitionsVectors

Gestures

withOffset()

export declare const withOffset: (value: Animated.Node<number>, state: Animated.Value<State>, offset?: Animated.Value<number>) => Animated.Node<number>;

Decorates animated value from the pan gesture handler so that its position is memorized accross touches.

--

withScaleOffset()

export declare const withScaleOffset: (value: Animated.Node<number>, state: Animated.Value<State>, offset?: Animated.Value<number>) => Animated.Node<number>;

Decorates animated value from the pinch gesture handler so that its scale value is memorized accross touches. This function differs from withOffset because it uses multiplication instead of additions. Translations start from 0 and are added on top of each other whereas scale transformations start from 1 and are multiplied on top of each other.

onScrollEvent()

export declare const onScrollEvent: (contentOffset: {
    x?: Animated.Node<number> | undefined;
    y?: Animated.Node<number> | undefined;
}) => (...args: any[]) => void;

Returns a reanimated event handler for the ScrollView.

Example usage for a vertical ScrollView.

<Animated.ScrollView onScroll={onScrollEvent({ y: new Value(0) })} />

And for a horizontal one.

<Animated.ScrollView onScroll={onScrollEvent({ x: new Value(0) })} horizontal />

onGestureEvent()

export declare const onGestureEvent: (nativeEvent: Partial<Adaptable<GestureHandlerStateChangeNativeEvent & TapGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & LongPressGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & ForceTouchGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & PanGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & PinchGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & RotationGestureHandlerEventExtra>> | Partial<Adaptable<GestureHandlerStateChangeNativeEvent & FlingGestureHandlerEventExtra>>) => {
    onHandlerStateChange: (...args: any[]) => void;
    onGestureEvent: (...args: any[]) => void;
};

Returns a reanimated event handler for any Gesture handler event handler. Example usage for a vertical PanGestureHandler.

const translationX = new Value(0);
const state = new Value(State.UNDETERMINED);
const gestureHandler = onGestureEvent({ translationX, state });
return <PanGestureHandler {...gestureHandler} />;

pinchBegan()

const pinchBegan: (state: Animated.Node<State>) => Animated.Node<1 | 0>;

Returns one if the state of the gesture is BEGAN. Is equivalent to eq(state, State.BEGAN) on iOS. On Android, this function takes into account a small inconsistency where the focalX and focalY values are not available at BEGAN but rather in ACTIVE. See https://github.com/kmagiera/react-native-gesture-handler/issues/553.

--

pinchActive()

const pinchActive:  (state: Animated.Node<State>, numberOfPointers: Animated.Node<number>) => Animated.Node<1 | 0>;

Returns one if the gesture is active (and doesn't overlap with pinchBegan).

--

pinchEnd()

const pinchEnd:  (state: Animated.Node<State>, numberOfPointers: Animated.Node<number>) => Animated.Node<1 | 0>;

Returns one if the gesture has ended. On iOS, this is equivalent to eq(state, State.END). On Android, this function returns 1 if the gesture has ended or if it is active but the number of pointers is less than 2.

--

panGestureHandler()

const panGestureHandler = () => { gestureHandler, translation, velocity, state }

--

pinchGestureHandler()

const pinchGestureHandler = () => { gestureHandler, scale, focal, state }

--

tapGestureHandler()

const tapGestureHandler = () => { gestureHandler, state, position, absolutePosition }