I'm going to make a todolist app. On the main page, to show the task of todolist, I used scrollview, but I want to change it to FlatList.
<ScrollView width = {width-20}>
{Object.values(tasks).map(item => (
<Task key = {item.id} item={item} deleteTask={_deleteTask}
toggleTask={_toggleTask} updateTask={_updateTask}/>
))}
</ScrollView>To Flatlist
More info here
<FlatList
data={Object.values(tasks)}
keyExtractor={(item)=>item?.id}
renderItem={({item})=><Task key = {item.id} item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/>}
/>
Because of performance, I recommend using the variation when we avoid inline functions. If you want to know more how to optimize React native FlatList performance: https://codingislove.com/optimize-react-native-flatlist-performance/
const renderItem = ({item})=><Task item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/>;
const keyExtractor = (item) => item.id;
return (
<Flatlist
data={Object.values(tasks)}
renderItem={renderItem}
keyExtractor={keyExtractor}
/>
);