React-native-gesture-handler: Swipeable: onSwipeableOpen, onSwipeableClose, onSwipeableRightOpen and onSwipeableLeftOpen callback taking to long, about 2 seconds.

[Blah2014]

onSwipeableOpen, onSwipeableClose, onSwipeableRightOpen and onSwipeableLeftOpen callback taking to long, about 2 seconds.

Suggestion:
in Swipeable.js after line 173 rowTranslation.setValue(fromValue);

Add:

let animatedListenerId = rowTranslation.addListener(({value}) => {
        let threshold = 0.1;
        if(Math.abs(value.toFixed()) >= (Math.abs(toValue.toFixed()) - Math.abs(toValue.toFixed()) * threshold)) {

            if (toValue > 0 && this.props.onSwipeableLeftOpen) {
                this.props.onSwipeableLeftOpen();
            } else if (toValue < 0 && this.props.onSwipeableRightOpen) {
                this.props.onSwipeableRightOpen();
            }

            if (toValue === 0) {
                this.props.onSwipeableClose && this.props.onSwipeableClose();
            } else {
                this.props.onSwipeableOpen && this.props.onSwipeableOpen();
            }

            rowTranslation.removeListener(animatedListenerId);
        }
    });

Change:

From:

Animated.spring(rowTranslation, {
      velocity: velocityX,
      bounciness: 0,
      toValue,
      useNativeDriver: this.props.useNativeAnimations,
    }).start(({ finished }) => {
      if (finished) {
        if (toValue > 0 && this.props.onSwipeableLeftOpen) {
          this.props.onSwipeableLeftOpen();
        } else if (toValue < 0 && this.props.onSwipeableRightOpen) {
          this.props.onSwipeableRightOpen();
        }

        if (toValue === 0) {
          this.props.onSwipeableClose && this.props.onSwipeableClose();
        } else {
          this.props.onSwipeableOpen && this.props.onSwipeableOpen();
        }
      }
    });

To:

Animated.spring(rowTranslation, {
      velocity: velocityX,
      bounciness: 0,
      toValue,
      useNativeDriver: this.props.useNativeAnimations,
    }).start();

Now I can close any opened row at real time...

[kmagiera]

Thanks @Blah2014 for reaching out.

If this issue is about code changes you suggest it would be much easier to discuss them if you decided to send a pull request instead.

[nixterrimus]

I'm seeing the spring taking a long time to settle as well. I haven't tested @Blah2014's change but, for the use case I'm building for I need the spring to settle down much quicker. Maybe a better issue title would be "For Swipeable Rows it takes a long time for onSwipeableOpen to be triggered"

[ptmt]

Thanks for this solution, @Blah2014, helped me a lot!

[osdnk]

https://github.com/kmagiera/react-native-gesture-handler/pull/164
@Blah2014 @ptmt @kmagiera
What do you think about this solution?
I didn't wish to add any listeners to native animation as it's not a way of using this library. It seems to be a hacky workaround. However, mind that Spring has some given duration. You may use onSwipeableLeftStartOpen and then set a timeout.

[ptmt]

@osdnk that make sense, thanks, I tried to do so, and able to reproduce the behaviour I needed

[osdnk]

It seems to be fixed

[MariShielaFurio]

Hi, can someone help me. i tried the example project but when i tried to close the swipeable view but its not working. Am I missing or doingsomething.. Any help is really appreciated. Thank you so much.

this is the sample project link : https://github.com/kmagiera/react-native-gesture-handler/blob/master/Example/swipeable/AppleStyleSwipeableRow.js