Detect 2 finger swipe direction in react native

Question

How do i figure out the swipe direction when user swipes with 2 fingers in react native? I am using PanResponder, it works fine when swipped with 1 finger I am able to detect the direction in this case. But when user swipes with 2 fingers, how to detect the swipe direction?

        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this._handleShouldSetPanResponder,
            onMoveShouldSetPanResponder: this._handleShouldSetPanResponder,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminate: this._handlePanResponderEnd
        });
    }

    _handleShouldSetPanResponder = (evt, gestureState) => {
        return true;
    };

    _gestureIsClick(gestureState) {
        return Math.abs(gestureState.dx) < 5 && Math.abs(gestureState.dy) < 5;
    }

    _handlePanResponderEnd = (evt, gestureState) => {
        const swipeDirection = this._getSwipeDirection(gestureState);
        this._triggerSwipeHandlers(swipeDirection, gestureState);
        return true;
    };

    _triggerSwipeHandlers(swipeDirection, gestureState) {
        const {
            onSwipe,
            onSwipeUp,
            onSwipeDown,
            onSwipeLeft,
            onSwipeRight
        } = this.props;
        const {
            SWIPE_LEFT,
            SWIPE_RIGHT,
            SWIPE_UP,
            SWIPE_DOWN
        } = swipeDirections;
        onSwipe && onSwipe(swipeDirection, gestureState);
        switch (swipeDirection) {
            case SWIPE_LEFT:
                onSwipeLeft && onSwipeLeft(gestureState);
                break;
            case SWIPE_RIGHT:
                onSwipeRight && onSwipeRight(gestureState);
                break;
            case SWIPE_UP:
                onSwipeUp && onSwipeUp(gestureState);
                break;
            case SWIPE_DOWN:
                onSwipeDown && onSwipeDown(gestureState);
                break;
        }
    }

    _getSwipeDirection(gestureState) {
        const {
            SWIPE_LEFT,
            SWIPE_RIGHT,
            SWIPE_UP,
            SWIPE_DOWN
        } = swipeDirections;
        const { dx, dy } = gestureState;
        if (this._isValidHorizontalSwipe(gestureState)) {
            return dx > 0 ? SWIPE_RIGHT : SWIPE_LEFT;
        } else if (this._isValidVerticalSwipe(gestureState)) {
            return dy > 0 ? SWIPE_DOWN : SWIPE_UP;
        }
        return null;
    }

render() {
        return <View {...this.props} {...this._panResponder.panHandlers} />;
    }

Above is the code snippet i am using. When i try to use 2 fingers swipe gesture dx and dy are 0, hences making my swipe_direction object null.

Ravi Singh Ravi Singh · Accepted Answer · 2019-10-03T08:50:54

you can use this https://github.com/kmagiera/react-native-gesture-handler

it will do all you wants to do.

here are its docs: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

Detect 2 finger swipe direction in react native

1 Answers