React Native Gesture Handler not calling events

Question

I am trying to use react-native-reanimated with react-native-gesture-handler but I have a problem to make it work. It seems that gesture-handler is not firing events. I followed the instructions to install react-native-gesture-handler, updated the CLI, added some code in MainActivity.java (https://docs.swmansion.com/react-native-gesture-handler/docs/#android)

I am using RN@0.63.2, node@10.18.0 and react-native-gesture-handler@1.7.0

I am currently following this tutorial but I can't get PanGestureHandler to work, and it is not working with TapGestureHandler too. Here is the code (which is basically the code from the tutorial):

import {PanGestureHandler, State} from 'react-native-gesture-handler';
import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import Animated from 'react-native-reanimated';

const {event, Value, cond, eq, add, set} = Animated;

const styles = StyleSheet.create({
  box: {
    backgroundColor: 'red',
    width: 200,
    height: 200,
    alignSelf: 'center',
  },
});

function interaction(gestureTranslation, gestureState) {
  console.log('test');
  const start = new Value(0);
  const dragging = new Value(0);
  const position = new Value(0);

  return cond(
    eq(gestureState, State.ACTIVE),
    [
      cond(eq(dragging, 0), [set(start, position)]),
      set(position, add(start, gestureTranslation)),
    ],
    [set(dragging, 0), position],
  );
}

export class Main extends Component {
  constructor(props) {
    super(props);
    const gestureX = new Value(0);
    const state = new Value(-1);

    this._onGestureEvent = event([
      {
        nativeEvent: {
          translationX: gestureX,
          state: state,
        },
      },
    ]);

    this._transX = interaction(gestureX, state);
  }

  render() {
    return (
      <PanGestureHandler
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onGestureEvent}>
        <Animated.View
          style={[styles.box, {transform: [{translateX: this._transX}]}]}
        />
      </PanGestureHandler>
    );
  }
}

export default Main;

Do you guys have any ideas why this is not working?

Answer 1

I had the same issue recently as well. Try turning off debugging. That did it for me.