title: detect when another view is touched - dragging with PanResponder in react native
body: <p>I have a card game where the user can drag cards around a screen. </p>
  
  <p>How can I detect if the cards have been dragged over other View components? My draggable card code is like this:</p>
  
  <pre><code>// A draggable card
  // drag drop code example used: https://github.com/brentvatne/react-native-animated-demo-tinder
  // panresponder docs: https://facebook.github.io/react-native/docs/panresponder.html
  
  class Card extends React.Component {
    componentWillMount() {
    this.state = {
      pan: new Animated.ValueXY(),
      enter: new Animated.Value(1),
    }
  
    this._panResponder = PanResponder.create({
  
      onMoveShouldSetResponderCapture: () =&gt; true,
      onMoveShouldSetPanResponderCapture: () =&gt; true,
      onPanResponderGrant: (e, gestureState) =&gt; {
                 Animated.spring(this.state.enter, {
          toValue: .75,
        }).start()
  
        this.state.pan.setOffset({x: this.state.pan.x._value, 
                                y: this.state.pan.y._value});
        this.state.pan.setValue({x: 0, y: 0});
      },
  
      onPanResponderMove: Animated.event([
        null, {dx: this.state.pan.x, dy: this.state.pan.y},
      ]),
  
      onPanResponderRelease: (e, {vx, vy}) =&gt; {
        // do stuff when card released 
      }
  
      Animated.spring(this.state.enter, {
        toValue: 1,
      }).start()
  
      this.state.pan.flattenOffset();
      var velocity;
  
      if (vx &gt;= 0) {
        velocity = clamp(vx, 3, 5);
      } else if (vx &lt; 0) {
        velocity = clamp(vx * -1, 3, 5) * -1;
      }
  
      Animated.spring(this.state.pan, {
            toValue: {x: 0, y: toValue},
            friction: 4
      }).start()
      }
    })
  }
  </code></pre>