title: react-native-draggable-flatlist not working inside ScrollView
body: <p>I am struggling for last couple of months to achieve a requirement where I'm having a draggable flatlist and a flatlist in a single scrollview and I should able to scroll the whole content.</p>
  
  <p>The draggable flatlist should have autoscroll as well, that means when the list is too long and I'm trying to drag it out of the viewport, the list should scroll automatically unless I drop it.</p>
  
  <p>I know the requirement is pretty much tricky but I am not getting any clue to make it work completely.</p>
  
  <p>I am using the below code and I am using 'react-native-draggable-flatlist'(<a href="https://github.com/computerjazz/react-native-draggable-flatlist" rel="noreferrer">https://github.com/computerjazz/react-native-draggable-flatlist</a>) for this purpose.</p>
  
  <p>Code:</p>
  
  <pre><code>import React from 'react';
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    TouchableOpacity
  } from 'react-native';
  
  import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
  } from 'react-native/Libraries/NewAppScreen';
  import DraggableFlatList from 'react-native-draggable-flatlist'
  import { Component } from 'react'
  
  const exampleData = [...Array(20)].map((d, index) =&gt; ({
    key: `item-${index}`, // For example only -- don't use index as your key!
    label: index,
    backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
    5}, ${132})`
  }));
  
  class App extends Component {
    state = {
      data: exampleData,
      scrollEnabled: true
    };
    onEnableScroll = (value: boolean) =&gt; {
      this.setState({
        enableScrollViewScroll: value,
      });
    };
  
    renderItem = ({ item, index, drag, isActive }) =&gt; {
      return (
        &lt;TouchableOpacity
          style={{
            height: 100,
            backgroundColor: isActive ? "blue" : item.backgroundColor,
            alignItems: "center",
            justifyContent: "center"
          }}
          onLongPress={drag}
        &gt;
          &lt;Text
            style={{
              fontWeight: "bold",
              color: "white",
              fontSize: 32
            }}
          &gt;
            {item.label}
          &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    };
  
    render() {
      return (
        &lt;ScrollView
          style={{ backgroundColor: '#000', flex: 1 }}
          contentContainerStyle={{ paddingTop: 800, paddingBottom: 100 }}
          scrollEnabled={this.state.scrollEnabled}
        &gt;
          &lt;DraggableFlatList
            data={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) =&gt; `draggable-item-${item.key}`}
            onMoveBegin={() =&gt; this.setState({ scrollEnabled: false })}
            onMoveEnd={({ data }) =&gt; {
              this.setState({ scrollEnabled: true, data });
            }}
          /&gt;
  
          &lt;FlatList
            data={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) =&gt; `draggable-item-${item.key}`}
          /&gt;
  
        &lt;/ScrollView&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    scrollView: {
      backgroundColor: Colors.lighter,
    },
    engine: {
      position: 'absolute',
      right: 0,
    },
    body: {
      backgroundColor: Colors.white,
    },
    sectionContainer: {
      marginTop: 32,
      paddingHorizontal: 24,
    },
    sectionTitle: {
      fontSize: 24,
      fontWeight: '600',
      color: Colors.black,
    },
    sectionDescription: {
      marginTop: 8,
      fontSize: 18,
      fontWeight: '400',
      color: Colors.dark,
    },
    highlight: {
      fontWeight: '700',
    },
    footer: {
      color: Colors.dark,
      fontSize: 12,
      fontWeight: '600',
      padding: 4,
      paddingRight: 12,
      textAlign: 'right',
    },
  });
  
  export default App;
  </code></pre>