Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Passing ListHeaderComponent and/or ListFooterComponent throws errors on drag #483

Open
NoahCardoza opened this issue Jun 21, 2023 · 3 comments · May be fixed by #484
Open

Passing ListHeaderComponent and/or ListFooterComponent throws errors on drag #483

NoahCardoza opened this issue Jun 21, 2023 · 3 comments · May be fixed by #484

Comments

@NoahCardoza
Copy link

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
NoahCardoza pushed a commit to NoahCardoza/react-native-draggable-flatlist that referenced this issue Jun 21, 2023
NoahCardoza pushed a commit to NoahCardoza/react-native-draggable-flatlist that referenced this issue Jun 21, 2023
@terribleben
Copy link

terribleben commented Jul 31, 2023

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
Copy link

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
Copy link

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

Screenshot_1724756087
Screenshot 2024-08-27 at 4 25 16 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants