Re-render list when numColumns changes (#923)

Author: YoussefHenna

packages/core/src/components/FlatList.tsx

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

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { FlashListProps, FlashList } from "@shopify/flash-list";
-import { FlatListProps, FlatList } from "react-native";
+import { FlatListProps, FlatList as FlatListComponent } from "react-native";
 import SectionHeader, { DefaultSectionHeader } from "./SectionHeader";
 import { flattenReactFragments } from "../../utilities";
+import FlatList from "../FlatList";
 
 type ListComponentType = "FlatList" | "FlashList";
 
@@ -52,7 +53,7 @@ const SectionList = React.forwardRef(
       keyExtractor: keyExtractorProp,
       ...rest
     }: FlatListSectionListProps<T> | FlashListSectionListProps<T>,
-    ref: React.Ref<FlatList | FlashList<any>>
+    ref: React.Ref<FlatListComponent | FlashList<any>>
   ) => {
     const data = React.useMemo(
       () => (Array.isArray(dataProp) ? dataProp : []) as T[],
@@ -189,7 +190,7 @@ const SectionList = React.forwardRef(
       case "FlatList":
         return (
           <FlatList
-            ref={ref as React.Ref<FlatList>}
+            ref={ref as React.Ref<FlatListComponent>}
             stickyHeaderIndices={sectionHeaderIndicies}
             {...(rest as FlatListProps<SectionListItem<T>>)}
             data={dataWithSections}

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

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

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-gesture-handler";
+import { FlatList } from "react-native";
 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-gesture-handler";
+import { FlatList } from "react-native";
 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 } from "react-native";
+import { FlatListProps, FlatList as FlatListComponent } from "react-native";
+import FlatList from "../FlatList";
 
 type ListComponentType = "FlatList" | "FlashList";
 
@@ -33,7 +34,7 @@ const SwipeableList = React.forwardRef(
       listComponent = "FlatList",
       ...rest
     }: FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
-    ref: React.Ref<FlatList | FlashList<any>>
+    ref: React.Ref<FlatListComponent | FlashList<any>>
   ) => {
     const [isSwiping, setIsSwiping] = React.useState(false);
 
@@ -52,7 +53,7 @@ const SwipeableList = React.forwardRef(
         case "FlatList":
           return (
             <FlatList
-              ref={ref as React.Ref<FlatList>}
+              ref={ref as React.Ref<FlatListComponent>}
               {...(rest as FlatListProps<T>)}
             />
           );