Using PanGestureHandler from react-native-gesture-handler with react-native-reanimated with useAnimatedGestureHandler throws this error.
Expected
onGestureHandlerEventlistener to be a function, instead got a value ofobjecttype
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
This comment on GitHub points in the correct direction.
Though not specified in the docs, but can be inferred from the examples... PanGestureHandler requires <Animated.View ...> child inside <PanGestureHandler ...>.
So <Animated.View ...>...</Animated.View> 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,