Reputation: 644
I'm using a DraggableFlatList
and am getting the warning mentioned in the title:
<DraggableFlatList
data={data}
onDragEnd={({ data }) => setData(data)}
keyExtractor={(item) => String(item.id)}
renderItem={renderItem}
/>
const renderItem = ({ item, drag, isActive }: RenderItemParams<ViewSet>) => {
const isSelected = getItemSelectedOrder(item.id) > 0;
return (
<ScaleDecorator>
<TouchableOpacity
onPress={() => {
if (isEditing) {
toggleItemSelection(item.id);
} else {
openEditViewSet(item);
}
}}
disabled={isActive}
style={[
styles.flatlistItemContainer,
{
backgroundColor: isActive ? '#ccc' : 'transparent',
borderColor: isSelected ? '#ccc' : '#ccc',
borderWidth: isSelected ? 1 : 1,
},
]}
>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
{isEditing ?
isSelected ? (
<IconFeather name='check-circle' size={20} color='blue' style={styles.checkCircle} />
) : (
<IconFeather name='circle' size={20} color="#555" style={styles.checkCircle} />
) : (<View></View>)
}
</View>
{!isEditing ? (
<View style={styles.flatlistItemTextViewNonEditMode}>
<Text style={styles.flatlistItemText}>{item.title}</Text>
</View>
) : (
<View style={styles.flatlistItemTextViewEditMode}>
<Text style={styles.flatlistItemText}>{item.title}</Text>
</View>
)}
{!isEditing && isSelected && (
<IconEntypo name='check' size={20} color="#555" style={styles.flatlistItemDragHandle} />
)}
{isEditing && (
<IconMaterial name='drag-handle' size={20} color="#555" style={styles.flatlistItemDragHandle} />
)}
</TouchableOpacity>
</ScaleDecorator>
);
};
I've read reanimated documentation and understand modifying objects passed to renderItem from outside is causing the warning. But, I don't know how I can avoid this issue.
Upvotes: 2
Views: 2709