tsuyoski
tsuyoski

Reputation: 644

Getting warning: Reanimated tried to modify key `current` of an object which has been already passed to a worklet

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

Answers (0)

Related Questions