React-native-gesture-handler: Inconsistent behavior of onGestureEvent

[jqueryisamonad]

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]

Thanks for reporting @hovoodd ! We will try to look into this one some time soon

[luutruong]

In other hand i have faced this issue. But it threw something like this error:
onGestureEvent expected function but object provided

Any idea?

[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

[luutruong]

@kmagiera You are right! 💃

[MehmetKaplan]

@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

Is it the first child only or the grand children are included as well? We have similar fail situation which occurs after Android 9, React Native 0.61.4 combination (through Expo SDK 36) for only some devices. (Does not fail in Pixel Emulator but strangely fails in Xioami Redmi Note 7.)

But in our scenario first child is Animated.View

<PanGestureHandler
    key={`pgh_${i}_${j}`}
    onGestureEvent={(e) => { this.onGestureEvent(e) }}
    onHandlerStateChange={e => this.onPanGestureStateChange(e)}
    maxPointers={1}
    minDist={10}
>
    <Animated.View
        ref={((ref) => { this.spaceAnimatedViews[i] = ref })}
        style={[defaultStyles._animatable_view, l_animatedStyle]}
        useNativeDriver={true}
    >
        <View style={l_style._box_content}>
            {furtherInnerContent}
        </View>
    </Animated.View>
</PanGestureHandler>

[leodavinci1]

@MehmetKaplan have you fixed this issue for your case? I have the same problem here

[MehmetKaplan]

In our case, we found that it was related with another bug we had got in the code and as a side effect Android 9+ and iOS were behaving differently.

It was something like, because of the bug, the transform translations were receiving undefined values. And this was causing different behavior in Android 9 vs iOS. To solve we fixed the bug in our code.

[jakub-gonet]

I can confirm this bug is present, but it only shows up when useNativeDriver is set to true.

Code example:

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

import React from 'react';
import { SafeAreaView, Animated, Platform } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

const transX = new Animated.Value(0);
const onGestureEvent = 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]}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View
          style={[
            styles.rectangle,
            styles.container,
            {
              /* not necessary, but you can wiggle the View if present :> */
              transform: [{ translateX: transX }],
            },
          ]}
        />
      </PanGestureHandler>
    </SafeAreaView>
  );
};

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

[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,
  },
};