How to create a drag and drop nested list in React Native - 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>
)
}
}