onGestureEvent not being called when I try to move a box with PanGestureHandler

Question

I've started react native project from scratch, installed react reanimated 1. I've pushed the repository: https://github.com/matiasmm/test-reanimated-gestures/tree/caf1af2e53605f19b466a27108ad408c95290707

I'm trying to test the pan event, but onGestureEvent doesn't seem to trigger. The box doesn't move (I'm testing on android). Even, If I replace

<PanGestureHandler onGestureEvent={onPanGestureEvent}>

by

<PanGestureHandler onGestureEvent={() => console.log("event called")}>

This console.log never executes ^

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import Reanimated from 'react-native-reanimated';

const _touchX = new Reanimated.Value(0);

const App: () => Node = () => {
  const onPanGestureEvent = Reanimated.event(
    [
      {
        nativeEvent: {
          translationX: _touchX,
        },
      },
    ],
    {
      useNativeDriver: true,
    },
  )

  return (
    <View style={styles.container}>
      <PanGestureHandler onGestureEvent={onPanGestureEvent}>
        <Reanimated.View style={[styles.view, {transform: [{translateX: _touchX}]}]} />
      </PanGestureHandler>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'gray',
    flex: 1,
  },
  view: {
    marginTop: 32,
    paddingHorizontal: 24,
    backgroundColor: 'red',
    width: 200,
    height: 200,
  }
});

export default App;

I want to understand why the event is not triggering. What do I need to do to make the box to move when I pan on it.

I really need it to be react-native-reanimated 1. I'm using it in another project and need to test it with it — Matias, Nov 04 '21 at 15:01

score 2 · Answer 1 · answered Nov 05 '21 at 14:17

2

Sorted it out, it seems the problem was on android only.

This fixed it https://docs.swmansion.com/react-native-gesture-handler/docs/#android

I needed to update my MainActivity.java with these lines

answered Nov 05 '21 at 14:17

Matias

527
1
4
19

1

Thanks Buddy. That also fixed my problem – Alauddin Ahmed Nov 10 '21 at 01:20
1

I think they updated the documentation because I don't see anything mentioned about MainActivity.java in the new documentation and I'm still not able to fix the issue on android – Adrian Buciuman Aug 25 '22 at 09:29
@AdrianBuciuman I have added a solution – Edison Biba Oct 19 '22 at 10:49

score 1 · Answer 2 · answered Oct 19 '22 at 10:46

In iOS was working fine but in android it requires to wrap your App with GestureHandlerRootView as noted in their updated documentation here

So in your App.js file you should have something like this:

const App = () => {
    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            {/* content */}
        </GestureHandlerRootView>
    )
}

onGestureEvent not being called when I try to move a box with PanGestureHandler

2 Answers2