Draggable flatlist not rendering anything

Question

I am trying to write a simple code for draggable-flatlist. The same code runs perfectly fine for FlatList. In the below code if I replace FlatList by DraggableFlatList, I do not get anything on screen though logs are being displayed from the rendered component 'TaskListTile'

  this.state = {
    data: [{key: '0',id:'0', name: 'Tasklist1', totalTasks: '10', completedTasks: '9'},
    {key: '1',id:'1', name: 'Tasklist2', totalTasks: '12', completedTasks: '9'},
    {key: '2',id:'2', name: 'Tasklist3', totalTasks: '50', completedTasks: '1'}
  ]

  }
}


render(){
  return (

    <FlatList
      data={this.state.data}
      renderItem= {({item}) =><TaskListTile displayData={item}/>}
      keyExtractor={item => item.id}
      scrollPercent={5}
      onMoveEnd={({ data }) => this.setState({ data })}
    /> 
  )
};

TaskListTile.js

    const {id, name, completedTasks, totalTasks} = this.props.displayData;

    return (
        <View key={id} style={{backgroundColor:'#d6eef8', borderColor:'#00CCFF', borderWidth:1,margin:10,padding:10, borderRadius:5}}>
            <Text style={{color:'#00CCFF', fontSize:20}}>{name}</Text>
            <View style={{flexDirection:'row'}}>
                <Text>Tasks completed: {completedTasks}/{totalTasks}</Text>
                <View style={{flex:1, alignItems:'flex-end'}}>

                    <ProgressBar progress={parseInt( this.props.displayData.completedTasks)/parseInt( this.props.displayData.totalTasks)} style={{height:8, width:90}}/>
                </View>
            </View>
        </View>
    );
}

Screenshot of app using FlatList

Answer 1

Pass extraData={this.state} to the component

   <FlatList
      data={this.state.data}
      extraData={this.state} // add this line
      renderItem= {({item}) =><TaskListTile displayData={item}/>}
      keyExtractor={item => item.id}
      scrollPercent={5}
      onMoveEnd={({ data }) => this.setState({ data })}
    />