How to create a drag and drop nested list in React Native

Question

I am fairly new to React native, and I am looking for a way to have a Drag and Drop Nested List. Basically, I need to create a ToDo list divided in groups, in which the ToDos' order can be changed not only within groups but also among them. I managed to separatly create both a drag & drop list (using the "draggable Flatlist" components) and a nested list, but I am struggling in combining them. Does anyone solved the issue or knows some kind of reusable component? Thank you.

Answer 1

Try the following:

    import React, { useState, useCallback, Component } from 'react';
    import { View, TouchableOpacity, Text, SafeAreaView, ScrollView } from 'react-native';
    import DraggableFlatList, { RenderItemParams, } from 'react-native-draggable-flatlist';

    const Goal_data = [
      {
        key: "0",
        label: "Group",
        backgroundColor: "#ababab",
      },
      {
        key: "1",
        label: "Group",
        backgroundColor: "#ababab",
      }
    ]
    const Goal_data1 = [
      {
        key: "0",
        label: "Task",
      },
      {
        key: "1",
        label: "Task",
      }
    ]
    export default class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          data: Goal_data,
          data1: Goal_data1,
          scrollEnabled: true
        }

      }
      onEnableScroll = (value) => {
        this.setState({
          enableScrollViewScroll: value,
        });
      }


      renderItem1 = ({ item, index, drag, isActive }) => {

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



      plusdata = (data) => {
        let d = this.state.data1;
        const newRecord = {
          key: "2",
          label: "Task",
        };
        this.setState({
          data1: [...d, newRecord]
        })
      }


      render() {
        
        return (
          <SafeAreaView style={{ flex: 1, }}>
            <ScrollView>
              <View style={{ backgroundColor: 'aeaeae', flex: 1, paddingHorizontal: 30 }}>
                <Text>Hello</Text>
                <DraggableFlatList
                  data={Goal_data}
                  debug={true}
                  extraData={Goal_data}
                  keyExtractor={(item, index) => `draggable-item-${item.key}`}
                  //onMoveBegin={() => this.setState({ scrollEnabled: false })}
                  onDragEnd={({ data }) => this.setState({ data: data })}
                  renderItem={({ item, index, drag, isActive }) => {
                    console.log('index', item)
                    return (
                      <TouchableOpacity
                        style={{

                          backgroundColor: isActive ? "blue" : item.backgroundColor,
                          //alignItems: "center",
                          justifyContent: "center",
                          marginVertical: 20

                        }}
                        onLongPress={drag}
                      >
                        <View style={{ backgroundColor: 'aeaeae', borderColor: '#000', borderWidth: 1, paddingHorizontal: 30 }}>
                          <Text>{item.label}{index}</Text>
                          <DraggableFlatList
                            data={this.state.data1}
                            extraData={this.state.data1}
                            debug={true}
                            keyExtractor={(item, index) => `draggable-item-${index}`}
                            //onDragEnd={({ data }) => this.setState({ data: data })}
                            renderItem={({ item, index, drag, isActive }) => {
                              console.log('index', item)
                              return (
                                <TouchableOpacity
                                  style={{
                                    height: 30,
                                    borderBottomWidth: 1,
                                    backgroundColor: isActive ? "blue" : item.backgroundColor,
                                    alignItems: "center",
                                    justifyContent: "center"
                                  }}
                                  onLongPress={drag}
                                >
                                  <Text
                                    style={{
                                      fontWeight: "bold",
                                      color: "white",
                                      fontSize: 20
                                    }}
                                  >
                                    {item.label}{index}
                                  </Text>
                                </TouchableOpacity>
                              );
                            }}
                          />

                          <TouchableOpacity style={{ marginTop: 50, alignSelf: 'center' }} onPress={() => this.plusdata(Goal_data1)}>
                            <Text>Add</Text>
                          </TouchableOpacity>
                        </View>
                      </TouchableOpacity>
                    );
                  }}
                />
              </View>

            </ScrollView>
          </SafeAreaView>
        )
      }
    }