Simplify calculation of SimpleStyle scrollable components styles (#876)

Author: YoussefHenna

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

@@ -12,22 +12,11 @@ const SimpleStyleFlashList = <T extends any>({
   data,
   ...rest
 }: Omit<FlashListProps<T>, "contentContainerStyle">) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight,
-    [data]
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     <FlashList
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle as ContentStyle}
       data={data}

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

@@ -12,22 +12,11 @@ const SimpleStyleFlatList = <T extends any>({
   data,
   ...rest
 }: Omit<FlatListProps<T>, "contentContainerStyle">) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight,
-    [data]
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     <FlatList
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle}
       data={data}

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

@@ -10,21 +10,11 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
 const SimpleStyleKeyboardAwareScrollView: React.FC<
   Omit<KeyboardAwareScrollViewProps, "contentContainerStyle">
 > = ({ style: styleProp, ...rest }) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     <KeyboardAwareScrollView
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle}
       {...rest}

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

@@ -12,22 +12,11 @@ const SimpleStyleMasonryFlashList = <T extends any>({
   data,
   ...rest
 }: Omit<MasonryFlashListProps<T>, "contentContainerStyle">) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight,
-    [data]
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     <MasonryFlashList
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle as ContentStyle}
       data={data}

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

@@ -10,21 +10,11 @@ import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
 const SimpleStyleScrollView: React.FC<
   Omit<ScrollViewProps, "contentContainerStyle">
 > = ({ style: styleProp, ...rest }) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     <ScrollView
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle}
       {...rest}

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

@@ -18,23 +18,12 @@ const SimpleStyleSectionList = <T extends { [key: string]: any }>({
   FlatListSectionListProps<T> | FlashListSectionListProps<T>,
   "contentContainerStyle"
 >) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight,
-    [data]
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     //@ts-ignore contentContainerStyle has different types for FlashList and FlatList implmentations and confuses TS
     <SectionList
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle}
       data={data}

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

@@ -18,23 +18,12 @@ const SimpleStyleSwipeableList = <T extends { [key: string]: any }>({
   FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
   "contentContainerStyle"
 >) => {
-  const [measuredWidth, setMeasuredWidth] = React.useState<number>();
-  const [measuredHeight, setMeasuredHeight] = React.useState<number>();
-
-  const { style, contentContainerStyle } = useSplitContentContainerStyles(
-    styleProp,
-    measuredWidth,
-    measuredHeight,
-    [data]
-  );
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(styleProp);
 
   return (
     //@ts-ignore contentContainerStyle has different types for FlashList and FlatList implmentations and confuses TS
     <SwipeableList
-      onLayout={(event) => {
-        setMeasuredWidth(event.nativeEvent.layout.width);
-        setMeasuredHeight(event.nativeEvent.layout.height);
-      }}
       style={style}
       contentContainerStyle={contentContainerStyle}
       data={data}

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { StyleProp, ViewStyle, StyleSheet } from "react-native";
 import { pick, omit } from "lodash";
 import { useDeepCompareMemo } from "../../utilities";
@@ -29,56 +28,18 @@ export const contentContainerStyleNames = [
 ];
 
 export default function useSplitContentContainerStyles(
-  originalStyle: StyleProp<ViewStyle>,
-  measuredWidth?: number,
-  measuredHeight?: number,
-  recalculateSizeDeps: React.DependencyList = []
+  originalStyle: StyleProp<ViewStyle>
 ) {
-  // 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);
 
-    let contentContainerStyle = pick(
+    const contentContainerStyle = pick(
       flattenedStyle,
       contentContainerStyleNames
     );
 
-    const leftBorderWidth =
-      flattenedStyle?.borderLeftWidth ?? flattenedStyle?.borderWidth ?? 0;
-    const rightBorderWidth =
-      flattenedStyle?.borderRightWidth ?? flattenedStyle?.borderWidth ?? 0;
-    const topBorderWidth =
-      flattenedStyle?.borderTopWidth ?? flattenedStyle?.borderWidth ?? 0;
-    const bottomBorderWidth =
-      flattenedStyle?.borderBottomWidth ?? flattenedStyle?.borderWidth ?? 0;
-
     // contentContainerStyle should always at least fill the parent to ensure sizing changes reflects properly on component and children.
-    // The measured sizes include borders, so we need to subtract those before applying
-    if (measuredWidth) {
-      contentContainerStyle.minWidth =
-        measuredWidth - leftBorderWidth - rightBorderWidth;
-    }
-    if (measuredHeight) {
-      contentContainerStyle.minHeight =
-        measuredHeight - topBorderWidth - bottomBorderWidth;
-    }
+    contentContainerStyle.flexGrow = 1;
 
     let style = omit(flattenedStyle, contentContainerStyleNames);
 
@@ -92,10 +53,7 @@ export default function useSplitContentContainerStyles(
 
     return {
       style,
-      contentContainerStyle: StyleSheet.flatten([
-        contentContainerStyle,
-        tempContentContainerStyle,
-      ]),
+      contentContainerStyle,
     };
-  }, [originalStyle, measuredWidth, measuredHeight, tempContentContainerStyle]);
+  }, [originalStyle]);
 }