React Native Gesture Handler shows: undefined is not an object

Question

I have setup a react-native 0.61 project which runs without any error but I'm getting this whenever I swipe. I am using react-native-gesture-handler: 1.3.0.

My

TypeError: Undefined is not an object (evaluating 'rectEvt[mappingKey]'). Please see the image for detail

I am using the following code:

const circleRadius = 30;
class Circle extends Component {
  _touchX = new Animated.Value(windowWidth / 2 - circleRadius);
  _onPanGestureEvent = Animated.event([{nativeEvent: {x: this._touchX}}, { useNativeDriver: true }]);
  render() {
    return (
      <PanGestureHandler
        onGestureEvent={this._onPanGestureEvent}>
        <Animated.View style={{
          height: 150,
          justifyContent: 'center',
        }}>
          <Animated.View
            style={[{
                backgroundColor: '#42a5f5', borderRadius: circleRadius, height: circleRadius * 2, width: circleRadius * 2,
              }, {
                transform: [{translateX: Animated.add(this._touchX, new Animated.Value(-circleRadius))}]
              }]}
          />
        </Animated.View>
      </PanGestureHandler>
    );
  }
}

Answer 1

You are passing the arguments to Animated.event in a wrong way:

_onPanGestureEvent = Animated.event([{nativeEvent: {x: this._touchX}}, { useNativeDriver: true }]);

The Animated.event should have the following structure:

_onPanGestureEvent=Animated.event(
   [{nativeEvent: {x: this._touchX}}],
   { useNativeDriver: true }
   {listener},          // Optional async listener
 )