title: React Native multiple panresponders
body: <p>With this code how would I add a second or multiple panresponders that can be moved independently of each other? If I use the same panresponder instance and code they move together as one. I want to know how to have several independently draggable panresponders.</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var {
    PanResponder,
    StyleSheet,
    View,
    processColor,
  } = React;
  
  var CIRCLE_SIZE = 80;
  var CIRCLE_COLOR = 'blue';
  var CIRCLE_HIGHLIGHT_COLOR = 'green';
  
  var PanResponderExample = React.createClass({
  
    statics: {
      title: 'PanResponder Sample',
      description: 'Shows the use of PanResponder to provide basic gesture handling.',
    },
  
    _panResponder: {},
    _previousLeft: 0,
    _previousTop: 0,
    _circleStyles: {},
    circle: (null : ?{ setNativeProps(props: Object): void }),
  
    componentWillMount: function() {
      this._panResponder = PanResponder.create({
        onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
        onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
        onPanResponderGrant: this._handlePanResponderGrant,
        onPanResponderMove: this._handlePanResponderMove,
        onPanResponderRelease: this._handlePanResponderEnd,
        onPanResponderTerminate: this._handlePanResponderEnd,
      });
      this._previousLeft = 20;
      this._previousTop = 84;
      this._circleStyles = {
        style: {
          left: this._previousLeft,
          top: this._previousTop
        }
      };
    },
  
    componentDidMount: function() {
      this._updatePosition();
    },
  
    render: function() {
      return (
        &lt;View
          style={styles.container}&gt;
          &lt;View
            ref={(circle) =&gt; {
              this.circle = circle;
            }}
            style={styles.circle}
            {...this._panResponder.panHandlers}
          /&gt;
        &lt;/View&gt;
      );
    },
  
    _highlight: function() {
      const circle = this.circle;
      circle &amp;&amp; circle.setNativeProps({
        style: {
          backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
        }
      });
    },
  
    _unHighlight: function() {
      const circle = this.circle;
      circle &amp;&amp; circle.setNativeProps({
        style: {
          backgroundColor: processColor(CIRCLE_COLOR)
        }
      });
    },
  
    _updatePosition: function() {
      this.circle &amp;&amp; this.circle.setNativeProps(this._circleStyles);
    },
  
    _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
      // Should we become active when the user presses down on the circle?
      return true;
    },
  
    _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
      // Should we become active when the user moves a touch over the circle?
      return true;
    },
  
    _handlePanResponderGrant: function(e: Object, gestureState: Object) {
      this._highlight();
    },
    _handlePanResponderMove: function(e: Object, gestureState: Object) {
      this._circleStyles.style.left = this._previousLeft + gestureState.dx;
      this._circleStyles.style.top = this._previousTop + gestureState.dy;
      this._updatePosition();
    },
    _handlePanResponderEnd: function(e: Object, gestureState: Object) {
      this._unHighlight();
      this._previousLeft += gestureState.dx;
      this._previousTop += gestureState.dy;
    },
  });
  
  var styles = StyleSheet.create({
    circle: {
      width: CIRCLE_SIZE,
      height: CIRCLE_SIZE,
      borderRadius: CIRCLE_SIZE / 2,
      backgroundColor: CIRCLE_COLOR,
      position: 'absolute',
      left: 0,
      top: 0,
    },
    container: {
      flex: 1,
      paddingTop: 64,
    },
  });
  
  module.exports = PanResponderExample;
  </code></pre>