react-native-draggable-flatlist not working inside ScrollView

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.

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.

I know the requirement is pretty much tricky but I am not getting any clue to make it work completely.

I am using the below code and I am using ‘react-native-draggable-flatlist'(https://github.com/computerjazz/react-native-draggable-flatlist) for this purpose.

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) => ({
  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) => {
    this.setState({
      enableScrollViewScroll: value,
    });
  };

  renderItem = ({ item, index, drag, isActive }) => {
    return (
      <TouchableOpacity
        style={{
          height: 100,
          backgroundColor: isActive ? "blue" : item.backgroundColor,
          alignItems: "center",
          justifyContent: "center"
        }}
        onLongPress={drag}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            fontSize: 32
          }}
        >
          {item.label}
        </Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <ScrollView
        style={{ backgroundColor: '#000', flex: 1 }}
        contentContainerStyle={{ paddingTop: 800, paddingBottom: 100 }}
        scrollEnabled={this.state.scrollEnabled}
      >
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
          onMoveBegin={() => this.setState({ scrollEnabled: false })}
          onMoveEnd={({ data }) => {
            this.setState({ scrollEnabled: true, data });
          }}
        />

        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item.key}`}
        />

      </ScrollView>
    );
  }
}

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;

36 thoughts on “react-native-draggable-flatlist not working inside ScrollView”

  1. 551802 566977I genuinely really like the theme on your site, I run a web web site , and i would adore to use this theme. Is it a no cost style, or is it custom? 154700

    Reply
  2. 587229 219207We give you with a table of all of the emoticons that can be used on this application, and the meaning of each symbol. Though it may possibly take some initial effort on your part, the skills garnered from regular and strategic use of social media will create a strong foundation to grow your business on ALL levels. 631160

    Reply
  3. Oregon has pioneered the decriminalization of controlled substances in the U.S. It was the first state to decriminalize possession of small amounts of marijuana in 1973. With a covenant in place to mitigate noise, Monte Creek Ranch Winery can move ahead with an amphitheatre at its property east of Kamloops. Cannabis products and accessories cannot be visible from outside the store. License applicants must submit pictures of the store exterior to show that they meet this requirement and ensure that there are no prohibited items on display. Here, cannabis retailers must mix strategic product development and marketing to engage customers with what they can do legally, including a unique in-store experience. Farnworth said the Kamloops store is just the start and he expects a number of public and private shops will open in the weeks and months after legalization. https://kamerondthw875310.activoblog.com/13080317/medical-marijuana-brampton Selling cannabis online does not limit the business terrain as you can offer your services to a large area or multiple locations.  Whether you’re a seasoned canna-sseur or just canna-curious, we’ve got you covered. Sunday 10:00am-5:00pm 10am to 10pm Daily Marijuana edibles are one of the most enjoyable ways to consume the herb. Weed can be infused into virtually any product that contains fats. Not only that, but marijuana edibles can also be made with tinctures — that’s how THC and CBD gummies are produced. At Weed Smart, you gain access to over 75 different items, from brownies to chocolate bars to gummies and cookies. Ontario THC Delivery has been delivering the highest quality cannabis products to Ontario for over 10 years. They offer a wide variety of marijuana strains, edibles, and accessories. All orders are delivered privately and discreetly.

    Reply
  4. This is top-notch! I wonder how much effort and time you have spent to come up with these informative posts about Website Traffic. Should you be interested in generating more ideas about this subject, take a look at my website xrank.cyou

    Reply

Leave a Comment