Change Flatlist from RN to gesture handler (#982)

* change to use Flatlist from gesture handler

* update to using Flatlist from gesture-handler

* fix typo

Author: sieu-db

packages/core/src/components/FlatList.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { FlatList as FlatListstComponent } from "react-native";
+import { FlatList as FlatListComponent } 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>>(
   <T extends any>(
     { numColumns, ...rest }: FlatListProps<T>,
-    ref: React.Ref<FlatListstComponent>
+    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,7 @@
 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 } from "react-native-gesture-handler";
 import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
 import { flattenReactFragments } from "../../utilities";
 import FlatList from "../FlatList";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import FlatList from "../FlatList";
-import { FlatList as FlatListComponent } from "react-native";
+import { FlatList as FlatListComponent } from "react-native-gesture-handler";
 import type { FlatListProps } from "react-native";
 import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
 

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,7 @@
 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 } from "react-native-gesture-handler";
 import FlatList from "../FlatList";
 
 type ListComponentType = "FlatList" | "FlashList";