React native draggle section list

Question

I am want to make a draggable section list. Where I can drag one item from the section list and move it to another section.

I am try to do this using.

react-native-draggable-flatlist

Issue is that when I select an item and drage it. It takes the whole list.

import React, { FC, useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
  RenderItemParams,
  ScaleDecorator,
} from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Data } from "./data";
import Example from "./example";

interface Item {
  header: string;
  data: string[];
}

const DATA: Item[] = [
  {
    header: "A",
    data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "A10"],
  },
  {
    header: "B",
    data: ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B10"],
  },
];

interface IList {
  item: string;
  selected: (item: string) => void;
  active: boolean;
}

const List: FC<IList> = ({ item, selected, active }) => {
  const getSelected = () => {
    console.log("item", item);
    selected(item);
  };
  return (
    <TouchableOpacity
      style={[
        styles.draggableContainer,
        {
          backgroundColor: active ? "blue" : "white",
        },
      ]}
      onLongPress={getSelected}
      onPress={getSelected}
    >
      <Text style={styles.text}>{item}</Text>
    </TouchableOpacity>
  );
};

export default function App() {

  const renderContent = (item: Item, drag: () => void, isActive: boolean) => {
    return (
      <View style={styles.item}>
        {item?.data?.map((seat) => (
          <List key={seat} item={seat} selected={drag} active={isActive} />
        ))}
      </View>
    );
  };

  const renderSectionHeader = (section: Item) => (
    <View style={styles.header}>
      <Text style={styles.headerText}>{section.header}</Text>
    </View>
  );

  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => (
    <View style={{ flex: 1 }}>
      <View>{renderSectionHeader(item)}</View>
      <View style={{ flex: 1 }}>{renderContent(item, drag, isActive)}</View>
    </View>
  );

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <DraggableFlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={(item, index) => `draggable-item-${item?.header}`}
        />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  item: {
    borderRadius: 5,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  header: {
    backgroundColor: "#f9c2ff",
    height: 30,
    justifyContent: "center",
    paddingLeft: 10,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  text: {
    fontSize: 18,
  },
  draggableContainer: {
    flexDirection: "column",
    flex: 1,
    paddingVertical: 10,
  },
  draggable: {
    flex: 1,
  },
  container: {
    flex: 1,
  },
});

I have tryed using draxList but I was getting peformace issues. Draggable flat list has the best performance.

Answer 1

I have so many times react-native-draggable-flatlist and I have the code for this below. it works for me fine you can update your code like this.

<DragableFlatlist
        ItemSeparatorComponent={() => (
        <View style={styles.itemSeprator} />
        )}
        data={drag}
        keyExtractor={(item) => item.id}
        nestedScrollEnabled
        onDragEnd={({ data }) => setDrag(data)}
        renderItem={renderItemDrag}
        showsVerticalScrollIndicator={false}
    />