title: How to enable dragging between two react-native-swiper components?
body: <p>I am trying to enable drag-and-drop between two react-native-swiper components. 
  I used Animated.Text and PanResponder to drag the text in bottom one react-native-swiper and it is working corretly until when the dragging is moved over the above one react-native-swiper componenent. The dragged text is unvisible when dragging over the other react-native-swiper.</p>
  
  <p>Could anyone explain what is happening and how to fix the behaviour?</p>
  
  <p>Here is the simplefied code to reproduce the behaviour:</p>
  
  <pre><code>import React from 'react';
  import {
    StyleSheet,
    Text,
    View,
    PanResponder,
    Animated,
    Dimensions } from 'react-native';
  import Swiper from 'react-native-swiper';
  
  const SCREEN_WIDTH = Dimensions.get('window').width;
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
  
      const position = new Animated.ValueXY();
  
      const panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () =&gt; true,
        onPanResponderMove: (event, gesture) =&gt; {
          position.setValue({ x: gesture.dx, y: gesture.dy });
        },
        onPanResponderRelease: () =&gt; {}
      });
  
      this.state = { panResponder, position };
    }
  
    renderAnimatedText(text) {
      return (
        &lt;Animated.Text
          style={[this.state.position.getLayout(), styles.text]}
          {...this.state.panResponder.panHandlers}
        &gt;
          {text}
        &lt;/Animated.Text&gt;
      );
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.swiperContainer}&gt;
            &lt;Swiper style={styles.wrapper}&gt;
              &lt;View style={styles.slide3}&gt;
                &lt;Text style={styles.text}&gt;Hello Stephen&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.slide2}&gt;
                &lt;Text style={styles.text}&gt;Hello Helpers&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.slide1}&gt;
                &lt;Text style={styles.text}&gt;Hello World&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Swiper&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.swiperContainer}&gt;
            &lt;Swiper style={styles.wrapper}&gt;
              &lt;View style={styles.slide1}&gt;
                {this.renderAnimatedText('You are The Best')}
              &lt;/View&gt;
              &lt;View style={styles.slide2}&gt;
                &lt;Text style={styles.text}&gt;and Greatest&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.slide3}&gt;
                &lt;Text style={styles.text}&gt;Thank you&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Swiper&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    swiperContainer: {
      height: 250,
      width: SCREEN_WIDTH
    },
    wrapper: {
    },
    slide1: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#9DD6EB',
    },
    slide2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#97CAE5',
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9',
    },
    text: {
      color: '#ff0',
      fontSize: 30,
      fontWeight: 'bold',
    }
  });
  </code></pre>
  
  <p>Here is also GitHub repo for the example code
  <a href="https://github.com/henkkasoft/drag-and-drop-example" rel="nofollow noreferrer">https://github.com/henkkasoft/drag-and-drop-example</a></p>