How to create Dragabble list in react native?

511 Views Asked by At

In my react native app with expo, i have task to to enable reordering the items in a list(by dragging/moving).i tried with "React Native Draggable FlatList"("https://www.npmjs.com/package/react-native-draggable-flatlist") and i got the list but it is not dragging ie i couldn't be able to change the position of each item in the list.The same code i copied. My code is:

list.js

   import React, { Component } from "react";
   import { View, TouchableOpacity, Text } from "react-native";
   import DraggableFlatList from "react-native-draggable-flatlist";

   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 Example extends Component {
  state = {
  data: exampleData
  };

  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 (
  <View style={{ flex: 1 }}>
    <DraggableFlatList
      data={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => `draggable-item-${item.key}`}
      onDragEnd={({ data }) => this.setState({ data })}
    />
  </View>
  );
  }
  }

  export default Example;

and the ui is like this:

The entire list is scrolling but each item is not draggable. How can i make this list draggable? Any help?

enter image description here

0

There are 0 best solutions below