GestureRecognizer slow down app

[divsbhalala]

when GestureRecognizer in a list of item array it slow down scrolling <GestureRecognizer> <View> .... . . . . . . . </GestureRecognizer>

[ptquang86]

same here, scrollview inside GestureRecognizer is hard to scroll need the ability to disable vertical swipe or horizontal swipe separately

[flikQ]

I am experiencing same problems as I am not using the up / down gestures. You guys will find your scroll up/down has been moved to 2 fingers as a result of GestureRecognizer being used.

[trustme217]

You can use this lib: https://github.com/blackstar217/react-native-swipe-gestures I fixed this issue.

[DavitVosk]

The same problem here. Who does solve this bug?

[DavitVosk]

@blackstar217 does your fork work for ScrollView? When I use GestureRecognizer, my scrolling becomes very and very slow.

[ivangainutsa21]

Did you fix?

[DavitVosk]

@sergeyunz21 Nope. But handled what I want with Animated. You can have a look here: https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

[ghost]

Try to put GestureRecognizer components into each list item. If there is no empty space on the screen except the list, it will work.

[luongs3]

any solution here? or other package please

[miralinochka]

I've solved this issue by editing the lib file(like that) in order not to recognize swipes up and down. ScrollView now works as fast as it should be.

'use strict';

import React, {Component} from 'react';
import {View, PanResponder} from 'react-native';

export const swipeDirections = {
  SWIPE_LEFT: 'SWIPE_LEFT',
  SWIPE_RIGHT: 'SWIPE_RIGHT'
};

const swipeConfig = {
  velocityThreshold: 0.3,
  directionalOffsetThreshold: 80
};

function isValidSwipe(velocity, velocityThreshold, directionalOffset, directionalOffsetThreshold) {
  return Math.abs(velocity) > velocityThreshold && Math.abs(directionalOffset) < directionalOffsetThreshold;
}

class GestureRecognizer extends Component {

  constructor(props, context) {
    super(props, context);
    this.swipeConfig = Object.assign(swipeConfig, props.config);
  }

  componentWillReceiveProps(props) {
    this.swipeConfig = Object.assign(swipeConfig, props.config);
  }

  componentWillMount() {
    const responderEnd = this._handlePanResponderEnd.bind(this);
    const shouldSetResponder = this._handleShouldSetPanResponder.bind(this);
    this._panResponder = PanResponder.create({ //stop JS beautify collapse
      onStartShouldSetPanResponder: shouldSetResponder,
      onMoveShouldSetPanResponder: shouldSetResponder,
      onPanResponderRelease: responderEnd,
      onPanResponderTerminate: responderEnd
    });
  }

  _handleShouldSetPanResponder(evt, gestureState) {
    return evt.nativeEvent.touches.length === 1 && !this._gestureIsClick(gestureState);
  }
  
  _gestureIsClick(gestureState) {
    return Math.abs(gestureState.dx) < 5;
  }

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

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

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

  _isValidHorizontalSwipe(gestureState) {
    const {vx, dy} = gestureState;
    const {velocityThreshold, directionalOffsetThreshold} = this.swipeConfig;
    return isValidSwipe(vx, velocityThreshold, dy, directionalOffsetThreshold);
  }

  _isValidVerticalSwipe(gestureState) {
    const {vy, dx} = gestureState;
    const {velocityThreshold, directionalOffsetThreshold} = this.swipeConfig;
    return isValidSwipe(vy, velocityThreshold, dx, directionalOffsetThreshold);
  }

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

export default GestureRecognizer;

[abdulrahman18]

@alya98 Thanks.It's working perfect.

[Achilles718611]

Still getting stuck sometimes when scroll vertical.