PanGestureHandler not working with Conditions

[anwersolangi]

Description

I am trying to mock the Reactions in Facebook Like, in my app, but when i try to use PanGestureHandler i encounter performance issue and the state is also not changing, the gesture become unresponsive and also onEnd is not firing. Codes:

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  VirtualizedList,
  Image,
  Pressable,
  Animated,
  Platform,
} from 'react-native';

import {PanGestureHandler} from 'react-native-gesture-handler';
import FastImage from 'react-native-fast-image';

const Reactions = () => {
const handleEmoticonWhenDragging = ({nativeEvent}) => {
    setIsDragging(true);
    setIsDraggingOutside(false);
    if (
      nativeEvent.x + nativeEvent.velocityX >= 34 &&
      nativeEvent.x + nativeEvent.velocityX < 60
    ) {
      handleWhenDragBetweenIcon(1);
    }
    if (
      nativeEvent.x + nativeEvent.velocityX >= 35 &&
      nativeEvent.x + nativeEvent.velocityX < 88.33
    ) {
      if (currentFocusIcon !== 1) {
        handleWhenDragBetweenIcon(1);
      }
    } else if (
      nativeEvent.x + nativeEvent.velocityX >= 88.33 &&
      nativeEvent.x + nativeEvent.velocityX < 141.66
    ) {
      if (currentFocusIcon !== 2) {
        handleWhenDragBetweenIcon(2);
      }
    } else if (
      nativeEvent.x + nativeEvent.velocityX >= 141.66 &&
      nativeEvent.x + nativeEvent.velocityX < 194.99
    ) {
      if (currentFocusIcon !== 3) {
        handleWhenDragBetweenIcon(3);
      }
    } else if (
      nativeEvent.x + nativeEvent.velocityX >= 194.99 &&
      nativeEvent.x + nativeEvent.velocityX < 248.32
    ) {
      if (currentFocusIcon !== 4) {
        handleWhenDragBetweenIcon(4);
      }
    } else if (
      nativeEvent.x + nativeEvent.velocityX >= 248.32 &&
      nativeEvent.x + nativeEvent.velocityX < 301.65
    ) {
      if (currentFocusIcon !== 5) {
        handleWhenDragBetweenIcon(5);
      }
    } else if (
      nativeEvent.x + nativeEvent.velocityX >= 301.65 &&
      nativeEvent.x + nativeEvent.velocityX <= 354.98
    ) {
      if (currentFocusIcon !== 6) {
        handleWhenDragBetweenIcon(6);
      }
    }
  };
   return (
<PanGestureHandler
    onGestureEvent={handleEmoticonWhenDragging}
    onHandlerStateChange={handleEmoticonWhenDragging}
    onBegan={handleEmoticonWhenDragging}
    maxPointers={1}
    onEnded={onDragRelease}>
    <Animated.View
      style={[
        styles.viewWrapGroupIcon,
        {
          marginLeft: moveRightGroupIcon,
          top: wrapperTop,
          opacity: wrapperOpacity,
          elevation: wrapperShadow,
        },
      ]}>
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 1 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Like</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconLikeUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 1
                    ? zoomIconChosen
                    : prevIcon === 1
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconLike,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.likeGif} />
        </Animated.View>
      </View>

      {/* Icon love */}
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 2 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Love</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconLoveUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 2
                    ? zoomIconChosen
                    : prevIcon === 2
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconLove,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.loveGif} />
        </Animated.View>
      </View>

      {/* Icon haha */}
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 3 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Haha</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconHahaUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 3
                    ? zoomIconChosen
                    : prevIcon === 3
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconHaha,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.hahaGif} />
        </Animated.View>
      </View>

      {/* Icon wow */}
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 4 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Wow</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconWowUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 4
                    ? zoomIconChosen
                    : prevIcon === 4
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconWow,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.wowGif} />
        </Animated.View>
      </View>

      {/* Icon sad */}
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 5 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Sad</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconSadUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 5
                    ? zoomIconChosen
                    : prevIcon === 5
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconSad,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.sadGif} />
        </Animated.View>
      </View>

      {/* Icon angry */}
      <View style={styles.viewWrapIcon}>
        {currentFocusIcon === 6 ? (
          <Animated.View
            style={[
              styles.viewWrapTextDescription,
              {
                bottom: pushTextDescriptionUp,
                transform: [{scale: zoomTextDescription}],
              },
            ]}>
            <Text style={styles.textDescription}>Angry</Text>
          </Animated.View>
        ) : null}
        <Animated.View
          style={{
            marginBottom: pushIconAngryUp,
            transform: [
              {
                scale: isDragging
                  ? currentFocusIcon === 6
                    ? zoomIconChosen
                    : prevIcon === 6
                    ? zoomIconNotChosen
                    : isJustDragInside
                    ? zoomIconWhenDragInside
                    : 0.8
                  : isDraggingOutside
                  ? zoomIconWhenDragOutside
                  : zoomIconAngry,
              },
            ],
          }}>
          <FastImage style={styles.imgIcon} source={Reactions?.angryGif} />
        </Animated.View>
      </View>
    </Animated.View>
  </PanGestureHandler>
);

Note: Please note that the above codes are just example of how I am animating and using the logic, my other logics are working fine just stuck here from few days. Checkout the screenshot below

Screenshots

https://i.stack.imgur.com/owIBt.gif

Steps To Reproduce

1. Create React Native project.
2. Install react-native-gesture-handler
3. use conditions in onGestureEvent.

Expected behavior

work like panResponder API.

Actual behavior

Leg, and slow, and onEnd not firing.

Snack or minimal code example

Package versions

• React: 17.0.2
• React Native: 0.65.1
• React Native Gesture Handler: ^1.10.3

[jgonet]

Why are you using same method on onGestureEvent, onHandlerStateChange, onBegan, onEnded? You also didn't provide onDragRelease function.

[anwersolangi]

const onDragRelease = () => {
    console.log('Drag release');
  };

i am using only console.log, to checkout is it working or not, and i found that it is not working and onEnded is not firing when i lift up the finger.
Similar issue: software-mansion/react-native-reanimated#901

[anwersolangi]

@jakub-gonet I am also stuck at a point, when I select Icon 1 or Like Button, then I have to again select or drag my finger again to select the other Icon, and in this time no on release or onEnded function is fired.
What I am trying to do is mock the Facebook Reactions.

[anwersolangi]

@jakub-gonet Check this https://github.com/duytq94/react-native-fb-reactions-animation/blob/master/src/Animation/Animation.Screen.js
I am trying to convert this Screen into Functional Component and trying to replace the panResponder with PanGestureHandler, and somehow I am succeeded, but not finding relevant props as are in the PanResponder, also my handleEmoticonWhenDragging function is working nicely and also onDragRelease is firing when I am using only console statement and not updating any state. But when there is state update, the PanGestureHandler stop working, and I have to move my fingers again on the PanGestureHandler to change the Icon, also onDragRelease is not firing too.