React-native-gesture-handler: Crash when using Animated.event on onGestureEvent

[henrikra]

I have made reproduction repo of the problem here: https://github.com/henrikra/gesture-handler-crash/blob/master/App.js

I am using PanGestureHandler as my gesture handler. Then I want to add function for onGestureEvent just like in the docs example: https://kmagiera.github.io/react-native-gesture-handler/docs/handler-pan.html#example
But if I do what the docs say and add Animated.event and swipe my view it will crash with this error:

But if I make the function by myself like in my repo it works. So something weird is going on here 🤔

[ATShiTou]

Same issue here. If I set useNativeDriver:false, it works well.

[henrikra]

@ATShiTou that is true but I want to use it because then the animation is smooth :)

[ATShiTou]

I know, why does the example work well? The DraggableBox

[ATShiTou]

Another consequence of the fact that events are hooked into the children node is that when using useNativeDriver flag with Animated.event the children node needs to be a view wrapped by Animated.API e.g. instead of a :

[osdnk]

@henrikra
I did try to take o a look and this issue and you might consider as a very temporary workaround to use Animated.View instead of View.

[naddeoa]

@ATShiTou If that's true then is this documentation accurate?

https://kmagiera.github.io/react-native-gesture-handler/docs/handler-pan.html

That snippet at the bottom is using the native driver with a direct child of View, not Animated.View.

[tonyxiao]

Seems to be a pure docs issue - see https://github.com/kmagiera/react-native-gesture-handler/pull/512

[brunocrpontes]

I'm getting that error, but in my case it happens when I wrapper a commom <View> inside a <TapGestureHandler>. However if i wrapper a <Animated.View> inside a <TapGestureHandler> the component works fine.