title: How to use PanResponder inside horizontal FlatList
body: <p>I want to drag out the selected item from the horizontal FlatList and drop it to another area of the screen. The problem is that my FlatList wrapper must have a fixed height and when trying to pull out selected element out FlatList component overflows it and my element gets hidden.</p>
  
  <p>I have tried to change zIndex and set overflow to visible but it does not work properly because setting zIndex works with siblings only and pretty buggy just yet, overflow:visible did not affect layout at all.</p>
  
  <h2>Here is the screenshot:</h2>
  
  <p><a href="https://i.stack.imgur.com/I1uE7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I1uE7.png" alt="enter image description here"></a></p>
  
  <h2>Here is my code:</h2>
  
  <pre><code>import React from 'react';
  import {
      SafeAreaView,
      View, 
      FlatList, 
      Text,
      StyleSheet,
      Animated,
      PanResponder
  } from 'react-native';
  import { v4 } from 'uuid';
  
  
  export default class App extends React.PureComponent{
  
    state = {
      data: [
        { id: v4(), title: 'Lightcoral', hex: '#eb7474' },
        { id: v4(), title: 'Orchid', hex: '#eb74dc' },
        { id: v4(), title: 'Mediumpurple', hex: '#9a74eb' },
        { id: v4(), title: 'Mediumslateblue', hex: '#8274eb' },
        { id: v4(), title: 'Skyblue', hex: '#74b6eb' },
        { id: v4(), title: 'Paleturquoise', hex: '#93ece2' },
        { id: v4(), title: 'Palegreen', hex: '#93ecb6' },
        { id: v4(), title: 'Khaki', hex: '#d3ec93' }
      ]
    }
  
    _position = new Animated.ValueXY()
  
    _panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () =&gt; true,
        onPanResponderMove: (event, gesture) =&gt; {
          this._position.setValue({ x: gesture.dx, y: gesture.dy})
        },
        onPanResponderRelease: () =&gt; {}
      })
  
  
    _keyExtractor = (item) =&gt; item.id;
  
  
    _renderItem = ({item}) =&gt; {
  
      return (
        &lt;Animated.View
          style={this._position.getLayout()}
          {...this._panResponder.panHandlers}  
        &gt;
          &lt;View style={[styles.itemBox, {backgroundColor: `${item.hex}`}]}&gt;
              &lt;Text&gt;{item.title}&lt;/Text&gt;
          &lt;/View&gt;
  
        &lt;/Animated.View&gt;
      )
    }
  
  
  
    render() {
      const { data } = this.state
  
      return (
        &lt;SafeAreaView style={styles.safeArea}&gt;
          &lt;View style={styles.container}&gt;
  
  
          &lt;View style={styles.targetArea}&gt;
            &lt;Text&gt;Drop HERE!!!&lt;/Text&gt;
          &lt;/View&gt;
  
  
          &lt;View style={{ height: 80, borderColor: 'black', borderWidth: 2 }}&gt;
              &lt;FlatList
                  data={data}
                  keyExtractor={this._keyExtractor}
                  renderItem={this._renderItem}
                  horizontal={true}
              /&gt;
          &lt;/View&gt;
  
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
  
      );
    }
  }
  
  const styles = StyleSheet.create({
    safeArea: {
      flex: 1
    },
    container: {
      flex: 1,
      justifyContent: 'space-between',
      alignItems: 'center',
      backgroundColor: '#fff',
    },
    itemBox: {
      width: 80,
      height: 80,
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1,
      borderColor: '#fff'
    },
    targetArea: {
      height: 150, 
      width: 150, 
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 1, 
      borderColor: '#eee',
      backgroundColor: '#F5FCFF',
      marginTop: 40
    }
  
  });
  </code></pre>
  
  <p><strong>I want to move the selected item of flatList around the screen and put it on top of any other element of the screen</strong>, if i simply could programmatically set zIndex of each element - I would be over the moon but unfortunately it seems not working as simple as that. Please help me I very desperate(((</p>