Change Flatlist from RN to gesture handler - 51 (#983)

* update to using Flatlist from gesture-handler

* update types

Author: sieu-db

packages/core/src/components/FlatList.tsx

@@ -1,14 +1,20 @@
 import React from "react";
-import { FlatList as FlatListstComponent } from "react-native";
+import {
+  FlatList as FlatListComponent,
+  NativeViewGestureHandlerProps,
+} from "react-native-gesture-handler";
 import type { FlatListProps } from "react-native";
 
-const FlatList = React.forwardRef<FlatListstComponent, FlatListProps<any>>(
+const FlatList = React.forwardRef<
+  FlatListComponent,
+  FlatListProps<any> & NativeViewGestureHandlerProps
+>(
   <T extends any>(
-    { numColumns, ...rest }: FlatListProps<T>,
-    ref: React.Ref<FlatListstComponent>
+    { numColumns, ...rest }: FlatListProps<T> & NativeViewGestureHandlerProps,
+    ref: React.Ref<FlatListComponent>
   ) => {
     return (
-      <FlatListstComponent
+      <FlatListComponent
         key={numColumns} // Changing numColumns requires re-rendering, setting it as the key ensures list is re-rendered when it changes
         numColumns={numColumns}
         ref={ref}

packages/core/src/components/SectionList/SectionList.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { FlashListProps, FlashList } from "@shopify/flash-list";
-import { FlatListProps, FlatList as FlatListComponent } from "react-native";
+import { FlatListProps } from "react-native";
+import {
+  FlatList as FlatListComponent,
+  NativeViewGestureHandlerProps,
+} from "react-native-gesture-handler";
 import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
 import { flattenReactFragments } from "../../utilities";
 import FlatList from "../FlatList";
@@ -192,7 +196,8 @@ const SectionList = React.forwardRef(
           <FlatList
             ref={ref as React.Ref<FlatListComponent>}
             stickyHeaderIndices={sectionHeaderIndicies}
-            {...(rest as FlatListProps<SectionListItem<T>>)}
+            {...(rest as FlatListProps<SectionListItem<T>> &
+              NativeViewGestureHandlerProps)}
             data={dataWithSections}
             renderItem={renderItem}
             keyExtractor={keyExtractor}

packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlatList.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import FlatList from "../FlatList";
-import { FlatList as FlatListComponent } from "react-native";
+import {
+  FlatList as FlatListComponent,
+  NativeViewGestureHandlerProps,
+} from "react-native-gesture-handler";
 import type { FlatListProps } from "react-native";
 import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
 
@@ -14,7 +17,8 @@ const SimpleStyleFlatList = React.forwardRef(
       style: styleProp,
       data,
       ...rest
-    }: Omit<FlatListProps<T>, "contentContainerStyle">,
+    }: Omit<FlatListProps<T>, "contentContainerStyle"> &
+      NativeViewGestureHandlerProps,
     ref: React.Ref<FlatListComponent>
   ) => {
     const { style, contentContainerStyle } =

packages/core/src/components/SimpleStyleScrollables/SimpleStyleSectionList.tsx

@@ -5,7 +5,7 @@ import type {
   FlashListSectionListProps,
 } from "../SectionList";
 import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
-import { FlatList } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
 import { FlashList } from "@shopify/flash-list";
 
 /**

packages/core/src/components/SimpleStyleScrollables/SimpleStyleSwipeableList.tsx

@@ -5,7 +5,7 @@ import type {
   FlatListSwipeableListProps,
 } from "../SwipeableItem";
 import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
-import { FlatList } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
 import { FlashList } from "@shopify/flash-list";
 
 /**

packages/core/src/components/SwipeableItem/SwipeableList.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { FlashListProps, FlashList } from "@shopify/flash-list";
-import { FlatListProps, FlatList as FlatListComponent } from "react-native";
+import { FlatListProps } from "react-native";
+import {
+  FlatList as FlatListComponent,
+  NativeViewGestureHandlerProps,
+} from "react-native-gesture-handler";
 import FlatList from "../FlatList";
 
 type ListComponentType = "FlatList" | "FlashList";
@@ -54,7 +58,7 @@ const SwipeableList = React.forwardRef(
           return (
             <FlatList
               ref={ref as React.Ref<FlatListComponent>}
-              {...(rest as FlatListProps<T>)}
+              {...(rest as FlatListProps<T> & NativeViewGestureHandlerProps)}
             />
           );
         case "FlashList":