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) => {
return (

<TouchableOpacity
onLongPress={drag}
disabled={isActive}
style={[
styles.rowItem,
{
backgroundColor: isActive ? 'red' : item.backgroundColor,
},
]}>
{item.label}


);
};

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