Inconsistent behavior of onGestureEvent

Hi, thanks for this nice library.

I have the following code:

this.translateX = new Animated.Value(0);

this.onGestureEvent = Animated.event(
    [{ nativeEvent: { translationX: this.translateX } }],
    { useNativeDriver: true },
);

this.translateX.addListener(({ value }) => console.log(value));

<PanGestureHandler onGestureEvent={this.onGestureEvent}>...</PanGestureHandler>

On iOS, after loading the application, the console will be empty (the listener not triggered, as expected). On Android, we’ll see the initial value of Animated.Value (0 in this case, i.e. the listener triggered off).

[kmagiera]

@luutruong in your case I bet that the reason was that the inner child of GestureHandler component was not an Animated.View. When you want to use Animated.event for event handlers you need to make sure that the child of the gesture-handler component is Animated.View (or Animated.Image etc) as opposed to it just being a View or sth

[jkadamczyk]

I tried the repro @jakub-gonet provided and with some help of @kmagiera I was able to reproduce the exact same issue with Animated.ScrollView the issue is not coming from the Gesture Handler but React Native Animated library.

Because of that I’m closing the issue.

Below example that I used to repro that 😄

// https://github.com/software-mansion/react-native-gesture-handler/issues/263

import React from 'react';
import { SafeAreaView, Animated, Platform, ScrollView } from 'react-native';

const transX = new Animated.Value(0);
const onScroll = Animated.event(
  [{ nativeEvent: { translationX: transX } }],
  { useNativeDriver: true } // only shows if `useNativeDriver: true` 
);
transX.addListener(({ value }) =>
  console.log(`onGestureEvent, ${Platform.OS}, value: ${value}`)
);

export default () => {
  return (
    <SafeAreaView style={[{ flex: 1 }, styles.container]}>
      <Animated.ScrollView onScroll={onScroll}>
        <Animated.View
          style={[
            styles.rectangle,
            styles.container,
            {
              /* not necessary, but you can wiggle the View if present :> */
              transform: [{ translateX: transX }],
            },
          ]}
        />
      </Animated.ScrollView>
    </SafeAreaView>
  );
};

const styles = {
  container: { justifyContent: 'center', alignItems: 'center' },
  rectangle: {
    backgroundColor: 'pink',
    width: 100,
    height: 100,
  },
};