FlashList padding and styles fix (49) (#921)

* Only include styles that flash list supports

* Code reuse through hook

* Fix flashlist to support percentage paddings

Author: YoussefHenna

packages/core/src/components/BottomSheet/BottomSheet.tsx

@@ -11,7 +11,7 @@ import BottomSheetComponent, {
   BottomSheetScrollView,
 } from "@gorhom/bottom-sheet";
 import { useTheme } from "@draftbit/theme";
-import { useDeepCompareMemo } from "../../utilities";
+import { extractPercentNumber, useDeepCompareMemo } from "../../utilities";
 
 type SnapPosition = "top" | "middle" | "bottom";
 
@@ -145,18 +145,6 @@ function convertSnapPointsForNewImplementation(
   });
 }
 
-function extractPercentNumber(percentString: string) {
-  const percentRegex = /(\d+)?%/;
-  const matches = percentString.match(percentRegex);
-  if (matches?.length) {
-    const percentNumber = Number(matches[1]);
-    if (!isNaN(percentNumber)) {
-      return percentNumber;
-    }
-  }
-  return undefined;
-}
-
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingHorizontal: 16,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { FlashList } from "@shopify/flash-list";
 import type { FlashListProps, ContentStyle } from "@shopify/flash-list";
-import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+import { useFlashListSplitContentContainerStyles } from "./useSplitContentContainerStyles";
 
 /**
  * A FlashList wrapper that takes a single `style` prop and internally extracts
@@ -17,7 +17,7 @@ const SimpleStyleFlashList = React.forwardRef(
     ref: React.Ref<FlashList<any>>
   ) => {
     const { style, contentContainerStyle } =
-      useSplitContentContainerStyles(styleProp);
+      useFlashListSplitContentContainerStyles(styleProp);
 
     return (
       <FlashList

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

@@ -5,7 +5,7 @@ import type {
   ContentStyle,
   MasonryFlashListRef,
 } from "@shopify/flash-list";
-import useSplitContentContainerStyles from "./useSplitContentContainerStyles";
+import { useFlashListSplitContentContainerStyles } from "./useSplitContentContainerStyles";
 
 /**
  * A MasonryFlashList wrapper that takes a single `style` prop and internally extracts
@@ -21,7 +21,7 @@ const SimpleStyleMasonryFlashList = React.forwardRef(
     ref: React.Ref<MasonryFlashListRef<any>>
   ) => {
     const { style, contentContainerStyle } =
-      useSplitContentContainerStyles(styleProp);
+      useFlashListSplitContentContainerStyles(styleProp);
 
     return (
       <MasonryFlashList

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

@@ -1,6 +1,9 @@
-import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { StyleProp, ViewStyle, StyleSheet, Dimensions } from "react-native";
 import { pick, omit } from "lodash";
-import { useDeepCompareMemo } from "../../utilities";
+import { extractPercentNumber, useDeepCompareMemo } from "../../utilities";
+
+const DEVICE_WIDTH = Dimensions.get("window").width;
+const DEVICE_HEIGHT = Dimensions.get("window").width;
 
 interface Styles {
   style?: StyleProp<ViewStyle>;
@@ -57,3 +60,53 @@ export default function useSplitContentContainerStyles(
     };
   }, [originalStyle]);
 }
+
+export function useFlashListSplitContentContainerStyles(
+  originalStyle: StyleProp<ViewStyle>
+): Styles {
+  const { style, contentContainerStyle } =
+    useSplitContentContainerStyles(originalStyle);
+
+  // FlashList only supports a subset of contentContainerStyles
+  // See https://shopify.github.io/flash-list/docs/usage/#contentcontainerstyle
+  const flashListContentContainerStyle = pick(contentContainerStyle, [
+    "backgroundColor",
+    "paddingTop",
+    "paddingLeft",
+    "paddingRight",
+    "paddingBottom",
+    "padding",
+    "paddingVertical",
+    "paddingHorizontal",
+  ]) as { [key: string]: any };
+
+  // FlashList percentage paddings cause it to freeze and crash
+  // This converts them to numbers based on device width/height
+  for (const [key, value] of Object.entries(flashListContentContainerStyle)) {
+    if (typeof value === "string" && key.includes("padding")) {
+      const asNumber = extractPercentNumber(value);
+      if (asNumber !== undefined) {
+        switch (key) {
+          case "padding":
+          case "paddingLeft":
+          case "paddingRight":
+          case "paddingHorizontal":
+            flashListContentContainerStyle[key] =
+              DEVICE_WIDTH * (asNumber / 100);
+            break;
+          case "paddingTop":
+          case "paddingBottom":
+          case "paddingVertical":
+            flashListContentContainerStyle[key] =
+              DEVICE_HEIGHT * (asNumber / 100);
+            break;
+        }
+      }
+    }
+  }
+
+  return {
+    style,
+    contentContainerStyle: flashListContentContainerStyle,
+  };
+}

packages/core/src/utilities.ts

@@ -305,3 +305,15 @@ export function useDeepCompareEffect(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return React.useEffect(effect, deps?.map(useDeepCompareMemoize));
 }
+
+export function extractPercentNumber(percentString: string) {
+  const percentRegex = /(\d+)?%/;
+  const matches = percentString.match(percentRegex);
+  if (matches?.length) {
+    const percentNumber = Number(matches[1]);
+    if (!isNaN(percentNumber)) {
+      return percentNumber;
+    }
+  }
+  return undefined;
+}