Tried to modify key `current` of an object which has been already passed to a worklet. See

[rohanthakran]

"react-native-reanimated": "^3.15.5", "react-native-gesture-handler": "^2.20.0", "react-native-draggable-flatlist": "^4.0.1",

[Reanimated] Tried to modify key current of an object which has been already passed to a worklet. See

https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable for more details.

This is the code <DraggableFlatList activationDistance={5} data={dragData} onDragEnd={({data}) => setDragData(data)} keyExtractor={item => item.key} renderItem={renderItemDrag} containerStyle={[{backgroundColor: 'pink'}]} />

const renderItemDrag = ({item, drag, isActive}: RenderItemParams<Item>) => { return ( <ScaleDecorator> <TouchableOpacity onLongPress={drag} disabled={isActive} style={[ styles.rowItem, { backgroundColor: isActive ? 'red' : item.backgroundColor, }, ]}> <Text style={styles.text}>{item.label}</Text> </TouchableOpacity> </ScaleDecorator> ); };

const initialData = [ { label: '🍎 Apple', key: 'apple', backgroundColor: 'indianred', }, { label: '🍊 Orange', key: 'orange', backgroundColor: 'orange', }, { label: '🍌 Banana', key: 'banana', backgroundColor: 'yellowgreen', }, { label: '🍇 Grapes', key: 'grapes', backgroundColor: 'purple', }, ];

[muneebaa]

Same issue here this happens on TouchableOpacity in renderItem

[stephentuso]

Also ran into this after updating to reanimated 3.15.5 and react native 0.75

[rsainiWin]

Facing the same issue here

[kaliseo]

Same here "react-native-reanimated": "^3.15.2", "react-native-gesture-handler": "^2.19.0", "react-native-draggable-flatlist": "^4.0.1",

[xaviers1998]

this is still an issue on the latest reanimated

[yestoall]

same here with expo 52

[Riyaancode]

facing same issue here too

"react-native": "0.75.4",
"react-native-reanimated": "^3.16.1",
"react-native-gesture-handler": "^2.20.0",
"react-native-draggable-flatlist": "^4.0.1",

[hengkx]

same here with expo 51

[MuellerSabrina]

I have the same problem. Is there any workaround by now?

[rybaier]

I Have the same issue and the ScaleDecorator specifically triggers a repetitive cascade of the same warning while the item is being dragged

without the ScaleDecorator the warning is triggered only upon completion and screen render

  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
    const { priorityColor } = getPriorityDetails(item.priority);

    return (
      <ScaleDecorator>
        <View key={item.id}>
         
              <TouchableOpacity 
                activeOpacity={1} 
                onPress={() => navigateTo(`/item/${item.id}`)}
                onLongPress={drag}
                disabled={isActive}
              >
                <View style={styles.card}>
                  <View style={styles.cardRow}>
                    <View
                      style={{
                        backgroundColor: priorityColor,
                        width: 7.5,
                      }}
                    />
                    <View style={styles.cardColumn}>
                      <Text style={styles.title}>{item.title}</Text>
                      <Text style={styles.location}>{item.location}</Text>
                      <Text style={styles.description}>{item.description}</Text>
                    </View>
                  </View>
                </View>
              </TouchableOpacity>
        </View>
      </ScaleDecorator> 
      ```

[rybaier]

I'm pretty sure The issue is within the KeyExtractor in the DraggableFlatList component. as it joins the index to the key provided so everytime an item is adjusted in the list the warning fires because the index is changing and changing the key.

[rybaier]

this is not best practice but for anyone interested in shutting the warnings off temporarily until this is resolved put this in the root level of the app.

import {
  configureReanimatedLogger,
  ReanimatedLogLevel,
} from "react-native-reanimated";

// This is the default configuration
configureReanimatedLogger({
  level: ReanimatedLogLevel.warn, // 2 levels warn or error 
  strict: false, // Reanimated runs in strict mode by default-  change this to false
});

Reanimated Logger Config

[MuellerSabrina]

I still get the warning with your solution.

I also have this weird behavior in my list, where the dragged item jumps back for a short moment to the original place.

[rybaier]

@MuellerSabrina

Try this

import { configureReanimatedLogger, ReanimatedLogLevel, } from "react-native-reanimated";

configureReanimatedLogger({ level: ReanimatedLogLevel.error, strict: true });

This sets it so only errors will be rendered. Though it's not an ideal work around

[MuellerSabrina]

Thank you @rybaier !

This works for the warning message. :)

I still get this weird visual behavior from my gif. Don´t know what that´s all about.

[rybaier]

Thank you @rybaier !

This works for the warning message. :)

I still get this weird visual behavior from my gif. Don´t know what that´s all about.

If you still have this, I ran into this and needed to ensure that I was setting the state with a new array not updating the existing array state

 // Create new array with updated data
  const updatedData = [...data];
  updatedData[to] = { ...movedItem, dataFieldAdjusted: new data  };
  
  // Update local state with new priorities
  setOriginalDataState(updatedData);

[Sowmo0509]

I still get the warning with your solution.

I also have this weird behavior in my list, where the dragged item jumps back for a short moment to the original place.

Having the same issue, really annoying the drag flickering.

[tfuda]

Isn't this a duplicate of #539? That issue was closed when a patch was issued, but the patch has never been merged into the library, and there have been no updates to this library for 2 years, so it seems it is not really being maintained.

[docluis]

as far as i can tell this is not the same as #539 . it gives the same warning, but even after applying the patch, the flicker issue persists.