title: How Can Bind the Dragged view inside ScrollView item?
body: <p>I have created <code>ScrollView</code> with three views. and I want to bind the dragged view inside the <code>ScrollView</code>, and the rest of haven't drag-dropped view should maintain outside of <code>ScrollView</code>. How can it be possible.</p>
  
  <p>See the GIF : I want to add the draggableView inside the ScrollView.</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,
    ScrollView,
  } from 'react-native';
  import Carousel from 'react-native-snap-carousel';
  
  
  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.dataDrag      =  [1,2,3,4],
      this.pan = this.dataDrag.map( () =&gt; new Animated.ValueXY() );
  
      this.state = {
          showDraggable   : true,
          dropZoneValues  : null,
          entries : ['Apple1' , 'Apple2', 'Apple3']
      };
  }
  
  getPanResponder(index) {
      return PanResponder.create({
          onStartShouldSetPanResponder: () =&gt; true,
          onPanResponderMove              : Animated.event([null,{
              dx  : this.pan[index].x,
              dy  : this.pan[index].y
          }]),
          onPanResponderRelease           : (e, gesture) =&gt; {
              if(this.isDropZone(gesture)){
                  this.setState({
                      showDraggable : false
                  });
              }else{
                  Animated.spring(
                      this.pan[index],
                      {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){
    console.log('event.nativeEvent.layout', event.nativeEvent.layout);
      this.setState({
          dropZoneValues : event.nativeEvent.layout
      });
  }
  
  _renderItem ({item, index}) {
      return (
          &lt;View style={{width: Dimensions.get('window').width - 100 , height : 150 , backgroundColor : 'red' , marginLeft : 50 , marginRight : 50}}&gt;
              &lt;Text style={{color : 'black' , marginTop : 20}}&gt;{item}&lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  
  render(){
      return (
          &lt;View style={styles.mainContainer}&gt;
  
              &lt;ScrollView&gt;
                &lt;View onLayout={this.setDropZoneValues.bind(this)}
                    style={[styles.dropZone , {marginTop : 10}]}&gt;
                &lt;/View&gt;
                &lt;View onLayout={this.setDropZoneValues.bind(this)}
                    style={[styles.dropZone , {marginTop : 10}]}&gt;
                &lt;/View&gt;
                &lt;View onLayout={this.setDropZoneValues.bind(this)}
                    style={[styles.dropZone , {marginTop : 10}]}&gt;
                &lt;/View&gt;
              &lt;/ScrollView&gt;
  
  
              {this.dataDrag.map((d, index) =&gt; (
                  &lt;Animated.View
                      key={index}
                      {...this.getPanResponder(index).panHandlers}
                      style={[styles.draggableContainer, this.pan[index].getLayout(), styles.circle]}&gt;
                      &lt;Text style={styles.text}&gt;Drag {index}&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',
          marginTop         : Window.height/2 - CIRCLE_RADIUS,
          marginLeft        : Window.width/2 - CIRCLE_RADIUS,
      },
      circle      : {
          backgroundColor     : '#1abc9c',
          width               : CIRCLE_RADIUS*2,
          height              : CIRCLE_RADIUS*2,
          borderRadius        : CIRCLE_RADIUS
      },
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/AhOIZ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AhOIZ.gif" alt="enter image description here"></a></p>