I'm using react native draggable flatlist but the items won't drag. However, OnDragStart() is called.
When I set debug to true, this happens: https://photos.app.goo.gl/NnE8wVebotPKuF8N7
It is supposed to look like this (when debug is set to false): https://photos.app.goo.gl/CUqVJdD4t7bdkMHfA
This is my code:
<DraggableFlatList
debug={true}
data={this.state.combined}
onDragEnd={(data) => this.setData(data)}
keyExtractor={(item,index) => item.name+index}
renderItem={(item)=>this.renderItem(item)}
/>
...
setData(data){
tasks = data.data.filter((task) => task.sortValue!=null &&
task.name.substring(task.name.length-8)!= " (cont.)")
this.makeCombined()
}
...
renderItem(item){
var index = item.index
var drag = item.drag
var isActive = item.isActive
item = item.item
return (
<ScaleDecorator>
<TouchableOpacity
onLongPress={item.sortValue!=null&&item.name.substring(item.name.length-8)!=" (cont.)"?drag:null}
disabled={isActive}
onPress={() => item.name.substring(item.name.length-8)!=" (cont.)"?this.setState({taskIndex:index}):this.setState({taskIndex:this.state.combined.findIndex((task)=>task.name==item.name.substring(0,item.name.length-8))})}
>
<ListItem bottomDivider containerStyle={this.state.taskIndex==index?{backgroundColor:'#6a99e6'}:null}>
<ListItem.Content>
<ListItem.Title style={this.state.taskIndex!=index?{fontWeight: 'bold'}:{fontWeight: 'bold',color:"white"}}>{item.name}</ListItem.Title>
<ListItem.Subtitle style={this.state.taskIndex==index?{color:"white"}:null}>{this.displayTime(item.start)+' - '+this.displayTime(item.end)}</ListItem.Subtitle>
{item.sortValue!=null?
<ListItem.Subtitle style={this.state.taskIndex==index?{color:"white"}:null}>
{'(Due: '+days[new Date(item.date).getDay()]+' '+this.displayDate(item.date)+' '+this.displayTime(item.date)+')'}
</ListItem.Subtitle>
:null}
</ListItem.Content>
</ListItem>
</TouchableOpacity>
</ScaleDecorator>
);
};
I am using:
"react-native-draggable-flatlist": "^3.1.1",
What am I doing wrong?
Edit: The DraggableFlatList was wrapped in a view. After removing that view and adding its style to the DraggableFlatList:
<DraggableFlatList
containerStyle = {{flex:10, marginHorizontal:20}}
debug={true}
data={this.state.combined}
onDragEnd={(data) => this.setData(data)}
keyExtractor={(item,index) => item.name+index}
renderItem={(item)=>this.renderItem(item)}
/>
Now when debug is true, the screen looks like this: https://photos.app.goo.gl/GrJznF9jG8MctDis9