Skip to main content
Version: 1.x

Event handling with reanimated nodes

react-native-reanimated's new syntax is possible to be used with Animated.event. Instead of providing only a mapping from event fields to animated nodes, it is allowed to write a function that takes reanimated values map as an input and return a block (or any other reanimated function) that will be then used to handle the event.

This syntax allows for providing some post-processing for the event data that does not fit well as a dependency of other nodes we connect to Animated.View component props. See example

import { event, set } from 'react-native-reanimated';

this.onGestureEvent = event([
nativeEvent: {
translationX: (x) => set(this._x, x),

If you'd like to use more than one event attribute in your reanimated code, this is also supported. Instead of defining event handler methods for a single attribute you can define at the level of nativeEvent. Here is an example that takes both translation attributes and state attribute from PanGestureHandler event:

nativeEvent: ({ translationX: x, translationY: y, state }) =>
set(this._transX, add(x, offsetX)),
set(this._transY, add(y, offsetY)),
cond(eq(state, State.END), [
set(this.offsetX, add(this.offsetX, x)),
set(this.offsetY, add(this.offsetY, y)),
transform: [{ translateX: this._transX, translateY: this._transY }],