Reputation: 1859
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?
Upvotes: 0
Views: 574