React native animations are not animated

Question

So currently experimenting on RN animations and i'm trying to go as slow as possible in order to understand basic functionality and workflow. I created a new Expo app and installed the react-native-reanimated package version ~1.13.0 and react-native-gesture-handler version ~1.7.0 through expo install command.

Later on i plan to use the react-native-redash package as well but now i'm trying to configure out why the code below doesn't work at all.

import React from "react";
import { View, StyleSheet } from "react-native";

import Animated from "react-native-reanimated";
import { PanGestureHandler } from "react-native-gesture-handler";

const { Value } = Animated;

export default function App() {
  const translateY = new Value(0);
  const translateX = new Value(0);

  return (
    <View style={styles.container}>
      <PanGestureHandler
        onGestureEvent={Animated.event(
          [
            {
              nativeEvent: {
                translationY: translateY,
                translationX: translateX,
              },
            },
          ],
          { useNativeDriver: true }
        )}
      >
        <Animated.View
          style={[
            styles.ball,
            {
              transform: [
                { translateY: translateY },
                { translateX: translateX },
              ],
            },
          ]}
        ></Animated.View>
      </PanGestureHandler>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center",
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 9999,
    backgroundColor: "black",
  },
});

I get no animation at my "ball" View after that. Anyone knows what am i doing wrong here?

Answer 1

The event() node should be assigned to the

 const eventHandler = event(/* */);
 // ...
 <PanGestureHandler
    onGestureEvent={eventHandler}
    onHandlerStateChange{eventHandler}
  >