Passing ListHeaderComponent and/or ListFooterComponent throws errors on drag

[NoahCardoza]

Describe the bug
Passing ListHeaderComponent and/or ListFooterComponent cause somewhere inside react-native-draggable-flatlist to raise TypeError: Attempted to assign to readonly property (node._store), which seems to be related to this.

To Reproduce
I don't have one at the moment. We aren't using expo, and I couldn't get Expo Snack to install the reanimated library.

Platform & Dependencies

• react-native-draggable-flatlist version: 4.0.1
• Platform: iOS and Android
• React Native: 0.70.9
• Reanimated version: 3.3.0
• React Native Gesture Handler version: 2.12.0

[terribleben]

Hitting the same issue. If I remove the ListHeaderComponent then the issue goes away. (But I need to use the header component...)

Edit: Confirming that PR #484 fixes the issue for us.

react-native-draggable-flatlist: 4.0.1
Platform: iOS and Android
React Native: 0.71.8
Reanimated: 3.1.0
React Native Gesture Handler: 2.7.1

[vasylnahuliak]

Also works

react-native-draggable-flatlist: 4.0.1
Platform: iOS and Android
React Native: 0.72.4
Reanimated: 3.4.2
React Native Gesture Handler: 2.12.1

Patch

diff --git a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx b/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
index d7d98c2..183d431 100644
--- a/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
+++ b/node_modules/react-native-draggable-flatlist/src/components/DraggableFlatList.tsx
@@ -402,14 +402,22 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
}

function DraggableFlatList<T>(
-  props: DraggableFlatListProps<T>,
+  {
+    ListFooterComponent,
+    ListHeaderComponent,
+    ...props
+  }: DraggableFlatListProps<T>,
 ref?: React.ForwardedRef<FlatList<T>> | null
) {
 return (
   <PropsProvider {...props}>
     <AnimatedValueProvider>
       <RefProvider flatListRef={ref}>
-          <MemoizedInner {...props} />
+          <MemoizedInner
+            {...props}
+            ListFooterComponent={ListFooterComponent}
+            ListHeaderComponent={ListHeaderComponent}
+          />
       </RefProvider>
     </AnimatedValueProvider>
   </PropsProvider>

react-native-draggable-flatlist+4.0.1.patch

[afrasali07]

Not able to pass components directly, which causes re-rendering issues.
Kindly help with a patch