React-native-gesture-handler: Does FlingGestureHandler work on Android?

[bobber205]

Using the latest Gesture Handler (1.5.0) and FlingGestureHandler doesn't seem to be working on Android. This implementation is working perfectly on iOS.

                      <FlingGestureHandler
                          direction={Directions.RIGHT}
                          onHandlerStateChange={({ nativeEvent }) => {
                              if (nativeEvent.state === State.ACTIVE) {
                                  if (this.state.button_index - 1 < 0) {
                                      this.buttonSelected(this.state.searchTypes.length - 1);
                                  } else {
                                      this.buttonSelected(this.state.button_index - 1);
                                  }
                              }
                          }}>
                          <FlingGestureHandler
                              direction={Directions.LEFT}
                              onHandlerStateChange={({ nativeEvent }) => {
                                  if (nativeEvent.state === State.ACTIVE) {
                                      // go to next button 
                                      if (this.state.button_index + 1 > this.state.searchTypes.length - 1) {
                                          this.buttonSelected(0);
                                      } else {
                                          this.buttonSelected(this.state.button_index + 1);
                                      }
                                  }
                              }}>
</FlingGestureHandler>
</FlingGestureHandler>

Got a FlatList inside of those two handler containers. I wasn't sure how to properly detection direction so I used two FlingGestureHandlers.

Nothing happens on Android -- is this a known issue?

[stefoid]

Im also trying to use Fling. Works on IOS, not on Android, have the main activity stuff done as detailed in the isntallation steps. Will check some other stuff to see if it is Fling only.

NO, Tap.. Doest work either. Can see the frames in the inspector on the emulator, but no callback occurs. Im running rn 61.0

[bolincoln]

Same issue here, no callbacks whatsoever from any GestureHandler on Android, works fine on iOS. Really minimum app:
<PanGestureHandler onGestureEvent={() => {console.log("Gesture!");}} onHandlerStateChange={() => { console.log("Statechange!");}}> <View style={{width: "100%", height: "100%"}}> <Text> Test Gesture! </Text> </View> </PanGestureHandler>
On RN 0.61.2.

[bolincoln]

Duh! It works fine if one actually follows the setup instructions for Android: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

[bobber205]

@bolincoln This issue is about Fling only. Is Fling working for you?

[lukeforehand]

Duh! It works fine if one actually follows the setup instructions for Android: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

I followed these instructions and no dice, the gesture works on iOS but not Android. Any other ideas?

[lukeforehand]

Duh! It works fine if one actually follows the setup instructions for Android: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android

I followed these instructions and no dice, the gesture works on iOS but not Android. Any other ideas?

Ok the event works now, to fix I had to the swap components around a little. Instead of
<FlingGestureHandler><ScrollView><Animated.View>...

<FlingGestureHandler><Animated.View><ScrollView>... worked.

[vtoupet]

@bobber205 I had the same issue as you until I found out a better way to handle right/left swipe. Instead of nesting 2 FlingGestureHandler I compare absoluteX from State.BEGAN state and State.ACTIVE. Below is an example of a Android working solution

const HorizontalSwipe = ({children, onLeft, onRight}: HorizontalSwipeProps) => {
  const [startX, setStartX] = React.useState<number>();

  return (
    <FlingGestureHandler
      direction={Directions.LEFT | Directions.RIGHT}
      onHandlerStateChange={({nativeEvent}) => {
        if (nativeEvent.state === State.BEGAN) {
          setStartX(nativeEvent.absoluteX);
        }
        if (nativeEvent.state === State.ACTIVE) {
          if (
            typeof startX !== 'undefined' &&
            nativeEvent.absoluteX - startX > 0
          ) {
            onLeft();
          } else {
            onRight();
          }
        }
      }}>
      {children}
    </FlingGestureHandler>
  );
};

I hope it will help anyone having problem on Android.