enable dragging of element in a ScrollView after long press
<p>I have implemented drag n drop list with panResponder and ScrollView. I want to be able to scroll the list even when I touch the item. Problem is that the item moves when I do the gesture to scroll. Of course I also want to be able to move the item but now it has the same gesture as scroll. I want to overcome it by enabling dragging the element only after it was long pressed (1,5 sec). How to implement it? I thought to use Touchable as an element with onPressIn / onPressOut just like described here: <a href="http://browniefed.com/blog/react-native-press-and-hold-button-actions/" rel="noreferrer">http://browniefed.com/blog/react-native-press-and-hold-button-actions/</a>
and somehow to enable panResponder after the time period, but I don't know how to enable it programmatically.</p>

<p>Right now this is my code for element in the list:</p>

<pre><code>class AccountItem extends Component {

  constructor(props) {
    super(props);
    this.state = {
      pan: new Animated.ValueXY(),
      zIndex: 0,
    }

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () =&gt; true,
      onPanResponderGrant: (e, gestureState) =&gt; {
        this.setState({ zIndex: 100 });
        this.props.disableScroll();
      },
      onPanResponderMove: Animated.event([null, {
        dx: this.state.pan.x,
        dy: this.state.pan.y,
      }]),
      onPanResponderRelease: (e, gesture) =&gt; {
        this.props.submitNewPositions();
        Animated.spring(
          this.state.pan,
          {toValue:{ x:0, y:0 }}
        ).start();
        this.setState({ zIndex: 0 });
        this.props.enableScroll();
      }
    })
  }

  meassureMyComponent = (event) =&gt; {
    const { setElementPosition } = this.props;
    let posY = event.nativeEvent.layout.y;
    setElementPosition(posY);
  }

  render() {
    const {name, index, onChangeText, onRemoveAccount} = this.props;

    return (
        &lt;Animated.View
          style={[this.state.pan.getLayout(), styles.container, {zIndex: this.state.zIndex}]}
          {...this.panResponder.panHandlers}
          onLayout={this.meassureMyComponent}
        &gt;

some other components...

        &lt;/Animated.View&gt;
    )
  }
}

export default AccountItem;
</code></pre>