PanGestureHandler Expected `onGestureHandlerEvent` listener to be a function

Question

Using PanGestureHandler from react-native-gesture-handler with react-native-reanimated with useAnimatedGestureHandler throws this error.

Expected onGestureHandlerEvent listener to be a function, instead got a value of object type

These are the components being rendered,

<View style={[styles.center]}>
  <Text style={{color: "#555", fontSize:16, marginTop: 120, marginBottom: 70, width: 250, margin: 'auto'}}>Works on the web but throws an error on iOS.</Text>

  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
    </PanGestureHandler>
  </Animated.View>
</View>;

Snack here, https://snack.expo.dev/4Mp-PfXPU

Edyth

Answer 1

This comment on GitHub points in the correct direction.

Though not specified in the docs, but can be inferred from the examples... PanGestureHandler requires an animated component child inside <PanGestureHandler ...>. (Such as <Animated.View ...>)

So <Animated.View ...>...</Animated.View>, or some other animated component, needs to be inside <PanGestureHandler onGestureEvent={gestureHandler}>.

<PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
  </Animated.View>
</PanGestureHandler>

Here's a working snack,

https://snack.expo.dev/ZRr6t24Hv

Edyth