Fix list components not resizing when data changes (#872)

Author: YoussefHenna

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

@@ -9,6 +9,7 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
  */
 const SimpleStyleFlashList = <T extends any>({
   style: styleProp,
+  data,
   ...rest
 }: Omit<FlashListProps<T>, "contentContainerStyle">) => {
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
@@ -17,7 +18,8 @@ const SimpleStyleFlashList = <T extends any>({
   const { style, contentContainerStyle } = useSplitContentContainerStyles(
     styleProp,
     measuredWidth,
-    measuredHeight
+    measuredHeight,
+    [data]
   );
 
   return (
@@ -28,6 +30,7 @@ const SimpleStyleFlashList = <T extends any>({
       }}
       style={style}
       contentContainerStyle={contentContainerStyle as ContentStyle}
+      data={data}
       {...rest}
     />
   );

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

@@ -9,6 +9,7 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
  */
 const SimpleStyleFlatList = <T extends any>({
   style: styleProp,
+  data,
   ...rest
 }: Omit<FlatListProps<T>, "contentContainerStyle">) => {
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
@@ -17,7 +18,8 @@ const SimpleStyleFlatList = <T extends any>({
   const { style, contentContainerStyle } = useSplitContentContainerStyles(
     styleProp,
     measuredWidth,
-    measuredHeight
+    measuredHeight,
+    [data]
   );
 
   return (
@@ -28,6 +30,7 @@ const SimpleStyleFlatList = <T extends any>({
       }}
       style={style}
       contentContainerStyle={contentContainerStyle}
+      data={data}
       {...rest}
     />
   );

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

@@ -9,6 +9,7 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
  */
 const SimpleStyleMasonryFlashList = <T extends any>({
   style: styleProp,
+  data,
   ...rest
 }: Omit<MasonryFlashListProps<T>, "contentContainerStyle">) => {
   const [measuredWidth, setMeasuredWidth] = React.useState<number>();
@@ -17,7 +18,8 @@ const SimpleStyleMasonryFlashList = <T extends any>({
   const { style, contentContainerStyle } = useSplitContentContainerStyles(
     styleProp,
     measuredWidth,
-    measuredHeight
+    measuredHeight,
+    [data]
   );
 
   return (
@@ -28,6 +30,7 @@ const SimpleStyleMasonryFlashList = <T extends any>({
       }}
       style={style}
       contentContainerStyle={contentContainerStyle as ContentStyle}
+      data={data}
       {...rest}
     />
   );

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

@@ -12,6 +12,7 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
  */
 const SimpleStyleSectionList = <T extends { [key: string]: any }>({
   style: styleProp,
+  data,
   ...rest
 }: Omit<
   FlatListSectionListProps<T> | FlashListSectionListProps<T>,
@@ -23,7 +24,8 @@ const SimpleStyleSectionList = <T extends { [key: string]: any }>({
   const { style, contentContainerStyle } = useSplitContentContainerStyles(
     styleProp,
     measuredWidth,
-    measuredHeight
+    measuredHeight,
+    [data]
   );
 
   return (
@@ -35,6 +37,7 @@ const SimpleStyleSectionList = <T extends { [key: string]: any }>({
       }}
       style={style}
       contentContainerStyle={contentContainerStyle}
+      data={data}
       {...rest}
     />
   );

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

@@ -12,6 +12,7 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
  */
 const SimpleStyleSwipeableList = <T extends { [key: string]: any }>({
   style: styleProp,
+  data,
   ...rest
 }: Omit<
   FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
@@ -23,7 +24,8 @@ const SimpleStyleSwipeableList = <T extends { [key: string]: any }>({
   const { style, contentContainerStyle } = useSplitContentContainerStyles(
     styleProp,
     measuredWidth,
-    measuredHeight
+    measuredHeight,
+    [data]
   );
 
   return (
@@ -35,6 +37,7 @@ const SimpleStyleSwipeableList = <T extends { [key: string]: any }>({
       }}
       style={style}
       contentContainerStyle={contentContainerStyle}
+      data={data}
       {...rest}
     />
   );

packages/core/src/components/SimpleStyleScrollables/useSplitContentContainerStyles.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { StyleProp, ViewStyle, StyleSheet } from "react-native";
 import { pick, omit } from "lodash";
 import { useDeepCompareMemo } from "../../utilities";
@@ -22,13 +23,35 @@ export const contentContainerStyleNames = [
   "alignContent",
   "flexDirection",
   "flexWrap",
+  "gap",
+  "columnGap",
+  "rowGap",
 ];
 
 export default function useSplitContentContainerStyles(
   originalStyle: StyleProp<ViewStyle>,
   measuredWidth?: number,
-  measuredHeight?: number
+  measuredHeight?: number,
+  recalculateSizeDeps: React.DependencyList = []
 ) {
+  // This temporarily removes contentContainerStyle min sizes whenever some
+  // given dependencies change to allow the list to properly recalculate it's measured size
+  const [tempContentContainerStyle, setTempContentContainerStyle] =
+    React.useState<ViewStyle | null>(null);
+
+  React.useEffect(() => {
+    if (tempContentContainerStyle) {
+      setTempContentContainerStyle(null);
+    }
+    // We only want this to run when measured size changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [measuredHeight, measuredWidth]);
+
+  React.useEffect(() => {
+    setTempContentContainerStyle({ minHeight: 0, minWidth: 0 });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, recalculateSizeDeps);
+
   return useDeepCompareMemo<Styles>(() => {
     const flattenedStyle = StyleSheet.flatten(originalStyle);
 
@@ -67,6 +90,12 @@ export default function useSplitContentContainerStyles(
       style = { flexGrow: style.flex, ...style };
     }
 
-    return { style, contentContainerStyle };
-  }, [originalStyle, measuredWidth, measuredHeight]);
+    return {
+      style,
+      contentContainerStyle: StyleSheet.flatten([
+        contentContainerStyle,
+        tempContentContainerStyle,
+      ]),
+    };
+  }, [originalStyle, measuredWidth, measuredHeight, tempContentContainerStyle]);
 }