react-native-draggable-flatlist icon indicating copy to clipboard operation
react-native-draggable-flatlist copied to clipboard

Conflicts with NativeWind when isActive updates className throws error: in CssInterop.View (created by Inner)

Open kuriel-dev opened this issue 9 months ago • 0 comments

Describe the bug Conflicts with NativeWind when isActive updates className throws error: in CssInterop.View (created by Inner) Error occurs while dragging an item that dynamically is being updated by className.

To Reproduce Just add a conditional style with isActive and NativeWind in the next example className={${isActive ? 'bg-red-500' : 'bg-neutral-400'}} causes the ERROR

<DraggableFlatList data={value}
                       keyExtractor={(item) => item.id.toString()}
                       activationDistance={isWeb() ? 1 : undefined}
                       onDragEnd={({data}) => setFieldValue(name, data)}
                       renderItem={({item, drag, getIndex, isActive}) =>
                         <TouchableOpacity onPressIn={drag}
                                           disabled={isActive}>
                           <Text className={`${isActive ? 'bg-red-500' : 'bg-neutral-400'}`}>
                             {item.label}
                           </Text>
                         </TouchableOpacity>
                       }/>

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

    "nativewind": "^4.1.23",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native": "~0.77.1",
    "react": "18.3.1",
    "expo": "^52.0.37",
    "react-native-reanimated": "~3.16.7",
    "react-native-gesture-handler": "~2.22.0",

Additional context By removing conditional or any dynamic className while dragging is active, the component works well, no errors.

Reported in the other lib: https://github.com/nativewind/nativewind/issues/1450

kuriel-dev avatar Mar 30 '25 21:03 kuriel-dev