React native draggable flat list not dragging

1.6k Views Asked by At

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

0

There are 0 best solutions below