title: How To Drag and Drop with Multiple View in React Native?
body: <p>I have added multiple view in the dynamically at same position also added the pan Gesture each of the views. The all view at the same position so that it override. My problem is that when wants to drag the last view, but it's dragged all views. How can drag the individual view.</p>
  
  <p>Here you can see GIF in which all views. View1 , View 2 and View 3. All are dragging. I want to only view 3 is draggable, others drags after completion of drag 3.</p>
  
  <p><strong>1. Drag 3 - First drag.</strong></p>
  
  <p><strong>2. Drag 2 - Second drag.</strong></p>
  
  <p><strong>3. Drag 1 - Third drag.</strong></p>
  
  <p><strong>Code :</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    View,
    Text,
    PanResponder,
    Animated,
    Easing,
    Dimensions,
    Platform,
    TouchableOpacity,
  } from 'react-native';
  
  let CIRCLE_RADIUS = 36;
  let Window = Dimensions.get('window');
  const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
      'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
      'Shake or press menu button for dev menu',
  });
  
  export default class App extends Component&lt;{}&gt; {
    constructor(props){
      super(props);
  
      this.state = {
          showDraggable   : true,
          dropZoneValues  : null,
          pan             : new Animated.ValueXY(),
          dataDrag        : [1,2,3,4],
      };
  
      this.panResponder = PanResponder.create({
          onStartShouldSetPanResponder    : () =&gt; true,
          onPanResponderMove              : Animated.event([null,{
              dx  : this.state.pan.x,
              dy  : this.state.pan.y
          }]),
          onPanResponderRelease           : (e, gesture) =&gt; {
              if(this.isDropZone(gesture)){
                  this.setState({
                      showDraggable : false
                  });
              }else{
                  Animated.spring(
                      this.state.pan,
                      {toValue:{x:0,y:0}}
                  ).start();
              }
          }
      });
  }
  
  isDropZone(gesture){
      var dz = this.state.dropZoneValues;
      return gesture.moveY &gt; dz.y &amp;&amp; gesture.moveY &lt; dz.y + dz.height;
  }
  
  setDropZoneValues(event){
      this.setState({
          dropZoneValues : event.nativeEvent.layout
      });
  }
  
  render(){
      return (
          &lt;View style={styles.mainContainer}&gt;
              &lt;View
                  onLayout={this.setDropZoneValues.bind(this)}
                  style={styles.dropZone}&gt;
                  &lt;Text style={styles.text}&gt;Drop me here!&lt;/Text&gt;
              &lt;/View&gt;
  
              {this.state.dataDrag.map((d, index) =&gt; (
                &lt;View key = {index} style={styles.draggableContainer}&gt;
                    &lt;Animated.View
                        {...this.panResponder.panHandlers}
                        style={[this.state.pan.getLayout(), styles.circle]}&gt;
                        &lt;Text style={styles.text}&gt;Drag {index}&lt;/Text&gt;
                    &lt;/Animated.View&gt;
                &lt;/View&gt;
              ))}
  
  
          &lt;/View&gt;
      );
  }
  
  renderDraggable(){
      //if(this.state.showDraggable){
          return (
              &lt;View style={styles.draggableContainer}&gt;
                  &lt;Animated.View
                      {...this.panResponder.panHandlers}
                      style={[this.state.pan.getLayout(), styles.circle]}&gt;
                      &lt;Text style={styles.text}&gt;Drag me!&lt;/Text&gt;
                  &lt;/Animated.View&gt;
              &lt;/View&gt;
          );
      //}
    }
  }
  
  let styles = StyleSheet.create({
      mainContainer: {
          flex    : 1
      },
      dropZone    : {
          height  : 100,
          backgroundColor:'#2c3e50'
      },
      text        : {
          marginTop   : 25,
          marginLeft  : 5,
          marginRight : 5,
          textAlign   : 'center',
          color       : '#fff'
      },
      draggableContainer: {
          position    : 'absolute',
          top         : Window.height/2 - CIRCLE_RADIUS,
          left        : Window.width/2 - CIRCLE_RADIUS,
      },
      circle      : {
          backgroundColor     : '#1abc9c',
          width               : CIRCLE_RADIUS*2,
          height              : CIRCLE_RADIUS*2,
          borderRadius        : CIRCLE_RADIUS
      },
  });
  </code></pre>
  
  <p>GIF :</p>
  
  <p><a href="https://i.stack.imgur.com/kTQMf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kTQMf.gif" alt="enter image description here"></a></p>
  
  <p><strong>I Want to below result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/t7avc.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t7avc.gif" alt="enter image description here"></a></p>