react-native-draggable-flatlist
react-native-draggable-flatlist copied to clipboard
Conflicts with NativeWind when isActive updates className throws error: in CssInterop.View (created by Inner)
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