@shopify/flash-list 1.2.2 → 1.3.1

package/dist/viewability/ViewabilityManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewabilityManager.d.ts","sourceRoot":"","sources":["../../src/viewability/ViewabilityManager.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,cAAc,CAAC;AAKrC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB,CAAC,CAAC;IACvC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,kBAAkB,CAA2B;IACrD,OAAO,CAAC,aAAa,CAAS;gBAElB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAyBtC;;OAEG;IACH,IAAW,4BAA4B,YAEtC;IAEM,OAAO,aAIZ;IAEK,uBAAuB,QAAS,MAAM,EAAE,UAE7C;IAEK,iBAAiB,aAStB;IAEK,mBAAmB,wBAAyB,MAAM,EAAE,UAmBzD;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAsC7B;CACH"}
+{"version":3,"file":"ViewabilityManager.d.ts","sourceRoot":"","sources":["../../src/viewability/ViewabilityManager.ts"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,cAAc,CAAC;AAKrC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB,CAAC,CAAC;IACvC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,kBAAkB,CAA2B;IACrD,OAAO,CAAC,aAAa,CAAS;gBAElB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAyBtC;;OAEG;IACH,IAAW,4BAA4B,YAEtC;IAEM,OAAO,aAIZ;IAEK,uBAAuB,QAAS,MAAM,EAAE,UAE7C;IAEK,iBAAiB,aAStB;IAEK,mBAAmB,wBAAyB,MAAM,EAAE,UAoBzD;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAsC7B;CACH"}

package/dist/viewability/ViewabilityManager.js

@@ -30,12 +30,12 @@ var ViewabilityManager = /** @class */ (function () {
             _this.updateViewableItems();
         };
         this.updateViewableItems = function (newViewableIndices) {
-            var _a, _b, _c;
-            var listSize = (_a = _this.flashListRef.recyclerlistview_unsafe) === null || _a === void 0 ? void 0 : _a.getRenderedSize();
+            var _a, _b, _c, _d;
+            var listSize = (_b = (_a = _this.flashListRef.recyclerlistview_unsafe) === null || _a === void 0 ? void 0 : _a.getRenderedSize()) !== null && _b !== void 0 ? _b : _this.flashListRef.props.estimatedListSize;
             if (listSize === undefined || !_this.shouldListenToVisibleIndices) {
                 return;
             }
-            var scrollOffset = ((_c = (_b = _this.flashListRef.recyclerlistview_unsafe) === null || _b === void 0 ? void 0 : _b.getCurrentScrollOffset()) !== null && _c !== void 0 ? _c : 0) - _this.flashListRef.firstItemOffset;
+            var scrollOffset = ((_d = (_c = _this.flashListRef.recyclerlistview_unsafe) === null || _c === void 0 ? void 0 : _c.getCurrentScrollOffset()) !== null && _d !== void 0 ? _d : 0) - _this.flashListRef.firstItemOffset;
             _this.viewabilityHelpers.forEach(function (viewabilityHelper) {
                 var _a;
                 viewabilityHelper.updateViewableItems((_a = _this.flashListRef.props.horizontal) !== null && _a !== void 0 ? _a : false, scrollOffset, listSize, function (index) { var _a; return (_a = _this.flashListRef.recyclerlistview_unsafe) === null || _a === void 0 ? void 0 : _a.getLayout(index); }, newViewableIndices);

package/dist/viewability/ViewabilityManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewabilityManager.js","sourceRoot":"","sources":["../../src/viewability/ViewabilityManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ViewabilityManager.js","sourceRoot":"","sources":["../../src/viewability/ViewabilityManager.ts"],"names":[],"mappings":";;;AAIA,kFAAoD;AAGpD;;GAEG;AACH;IAKE,4BAAY,YAA0B;QAAtC,iBAuBC;;QA1BO,uBAAkB,GAAwB,EAAE,CAAC;QAC7C,kBAAa,GAAG,KAAK,CAAC;QAkCvB,YAAO,GAAG;YACf,KAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAC,iBAAiB;gBAChD,OAAA,iBAAiB,CAAC,OAAO,EAAE;YAA3B,CAA2B,CAC5B,CAAC;QACJ,CAAC,CAAC;QAEK,4BAAuB,GAAG,UAAC,GAAa;YAC7C,KAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC,CAAC;QAEK,sBAAiB,GAAG;YACzB,IAAI,KAAI,CAAC,aAAa,EAAE;gBACtB,OAAO;aACR;YACD,KAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,KAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAC,iBAAiB;gBAChD,iBAAiB,CAAC,aAAa,GAAG,IAAI,CAAC;YACzC,CAAC,CAAC,CAAC;YACH,KAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC,CAAC;QAEK,wBAAmB,GAAG,UAAC,kBAA6B;;YACzD,IAAM,QAAQ,GACZ,MAAA,MAAA,KAAI,CAAC,YAAY,CAAC,uBAAuB,0CAAE,eAAe,EAAE,mCAC5D,KAAI,CAAC,YAAY,CAAC,KAAK,CAAC,iBAAiB,CAAC;YAC5C,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,KAAI,CAAC,4BAA4B,EAAE;gBAChE,OAAO;aACR;YACD,IAAM,YAAY,GAChB,CAAC,MAAA,MAAA,KAAI,CAAC,YAAY,CAAC,uBAAuB,0CAAE,sBAAsB,EAAE,mCAClE,CAAC,CAAC,GAAG,KAAI,CAAC,YAAY,CAAC,eAAe,CAAC;YAC3C,KAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAC,iBAAiB;;gBAChD,iBAAiB,CAAC,mBAAmB,CACnC,MAAA,KAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,mCAAI,KAAK,EAC3C,YAAY,EACZ,QAAQ,EACR,UAAC,KAAa,YACZ,OAAA,MAAA,KAAI,CAAC,YAAY,CAAC,uBAAuB,0CAAE,SAAS,CAAC,KAAK,CAAC,CAAA,EAAA,EAC7D,kBAAkB,CACnB,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,4BAAuB,GAAG,UAChC,iBAAuD,EACvD,sBAGa;YAEb,IAAM,YAAY,GAAsD,UACtE,KAAa,EACb,UAAmB;;gBAEnB,IAAM,IAAI,GAAG,MAAA,KAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,0CAAG,KAAK,CAAC,CAAC;gBACnD,IAAM,GAAG,GACP,IAAI,KAAK,SAAS,IAAI,KAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,KAAK,SAAS;oBACtE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE;oBAClB,CAAC,CAAC,KAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACxD,OAAO;oBACL,KAAK,OAAA;oBACL,UAAU,YAAA;oBACV,IAAI,MAAA;oBACJ,GAAG,KAAA;oBACH,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;iBACtB,CAAC;YACJ,CAAC,CAAC;YACF,OAAO,IAAI,2BAAiB,CAC1B,iBAAiB,EACjB,UAAC,OAAO,EAAE,mBAAmB,EAAE,sBAAsB;gBACnD,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAG;oBACvB,aAAa,EAAE,OAAO,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,EAAzB,CAAyB,CAAC;oBAChE,OAAO,iEACF,mBAAmB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,EAAzB,CAAyB,CAAC,0BAC7D,sBAAsB,CAAC,GAAG,CAAC,UAAC,KAAK;wBAClC,OAAA,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;oBAA1B,CAA0B,CAC3B,SACF;iBACF,CAAC,CAAC;YACL,CAAC,CACF,CAAC;QACJ,CAAC,CAAC;QApHA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IACE,YAAY,CAAC,KAAK,CAAC,sBAAsB,KAAK,IAAI;YAClD,YAAY,CAAC,KAAK,CAAC,sBAAsB,KAAK,SAAS,EACvD;YACA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B,IAAI,CAAC,uBAAuB,CAC1B,YAAY,CAAC,KAAK,CAAC,iBAAiB,EACpC,YAAY,CAAC,KAAK,CAAC,sBAAsB,CAC1C,CACF,CAAC;SACH;QACD,CAAC,MAAA,YAAY,CAAC,KAAK,CAAC,8BAA8B,mCAAI,EAAE,CAAC,CAAC,OAAO,CAC/D,UAAC,IAAI;YACH,KAAI,CAAC,kBAAkB,CAAC,IAAI,CAC1B,KAAI,CAAC,uBAAuB,CAC1B,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,sBAAsB,CAC5B,CACF,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC;IAKD,sBAAW,4DAA4B;QAHvC;;WAEG;aACH;YACE,OAAO,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5C,CAAC;;;OAAA;IAwFH,yBAAC;AAAD,CAAC,AA3HD,IA2HC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/flash-list",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "keywords": [
     "react-native",
     "recyclerview",

package/src/FlashList.tsx

@@ -141,7 +141,7 @@ class FlashList<T> extends React.PureComponent<
 
   // Some of the state variables need to update when props change
   static getDerivedStateFromProps<T>(
-    nextProps: FlashListProps<T>,
+    nextProps: Readonly<FlashListProps<T>>,
     prevState: FlashListState<T>
   ): FlashListState<T> {
     const newState = { ...prevState };
@@ -427,7 +427,7 @@ class FlashList<T> extends React.PureComponent<
     return (
       <>
         <PureComponentWrapper
-          enabled={children.length > 0 || this.isEmptyList}
+          enabled={this.isListLoaded || children.length > 0 || this.isEmptyList}
           contentStyle={this.props.contentContainerStyle}
           horizontal={this.props.horizontal}
           header={this.props.ListHeaderComponent}
@@ -448,7 +448,7 @@ class FlashList<T> extends React.PureComponent<
           ? this.getValidComponent(this.props.ListEmptyComponent)
           : null}
         <PureComponentWrapper
-          enabled={children.length > 0 || this.isEmptyList}
+          enabled={this.isListLoaded || children.length > 0 || this.isEmptyList}
           contentStyle={this.props.contentContainerStyle}
           horizontal={this.props.horizontal}
           header={this.props.ListFooterComponent}
@@ -489,10 +489,15 @@ class FlashList<T> extends React.PureComponent<
   };
 
   private updateDistanceFromWindow = (event: LayoutChangeEvent) => {
-    this.distanceFromWindow = this.props.horizontal
+    const newDistanceFromWindow = this.props.horizontal
       ? event.nativeEvent.layout.x
       : event.nativeEvent.layout.y;
-    this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;
+
+    if (this.distanceFromWindow !== newDistanceFromWindow) {
+      this.distanceFromWindow = newDistanceFromWindow;
+      this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;
+      this.viewabilityManager.updateViewableItems();
+    }
   };
 
   private getTransform() {

package/src/MasonryFlashList.tsx

@@ -0,0 +1,459 @@
+import React, { useCallback, useRef, useEffect, useMemo } from "react";
+import {
+  View,
+  Dimensions,
+  ScrollViewProps,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from "react-native";
+
+import CustomError from "./errors/CustomError";
+import ExceptionList from "./errors/ExceptionList";
+import FlashList from "./FlashList";
+import { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
+import ViewToken from "./viewability/ViewToken";
+
+export interface MasonryListRenderItemInfo<TItem>
+  extends ListRenderItemInfo<TItem> {
+  columnSpan: number;
+  columnIndex: number;
+}
+
+export type MasonryListRenderItem<TItem> = (
+  info: MasonryListRenderItemInfo<TItem>
+) => React.ReactElement | null;
+
+export interface MasonryFlashListProps<T>
+  extends Omit<
+    FlashListProps<T>,
+    | "horizontal"
+    | "initialScrollIndex"
+    | "inverted"
+    | "onBlankArea"
+    | "viewabilityConfigCallbackPairs"
+  > {
+  /**
+   * Allows you to change the column widths of the list. This is helpful if you want some columns to be wider than the others.
+   * e.g, if `numColumns` is `3`, you can return `2` for `index 1` and `1` for the rest to achieve a `1:2:1` split by width.
+   */
+  getColumnFlex?: (
+    items: MasonryListItem<T>[],
+    columnIndex: number,
+    maxColumns: number,
+    extraData?: any
+  ) => number;
+
+  /**
+   * If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order.
+   * `overrideItemLayout` is required to make this work.
+   */
+  optimizeItemArrangement?: boolean;
+
+  /**
+   * Extends typical `renderItem` to include `columnIndex` and `columnSpan` (number of columns the item spans).
+   * `columnIndex` gives the consumer column information in case they might need to treat items differently based on column.
+   * This information may not otherwise be derived if using the `optimizeItemArrangement` feature, as the items will no
+   * longer be linearly distributed across the columns; instead they are allocated to the column with the least estimated height.
+   */
+  renderItem: MasonryListRenderItem<T> | null | undefined;
+}
+
+type OnScrollCallback = ScrollViewProps["onScroll"];
+const defaultEstimatedItemSize = 100;
+
+export interface MasonryFlashListScrollEvent extends NativeScrollEvent {
+  doNotPropagate?: boolean;
+}
+
+export interface MasonryListItem<T> {
+  originalIndex: number;
+  originalItem: T;
+}
+
+/**
+ * MasonryFlashListRef with support for scroll related methods
+ */
+export interface MasonryFlashListRef<T> {
+  scrollToOffset: FlashList<T>["scrollToOffset"];
+  scrollToEnd: FlashList<T>["scrollToEnd"];
+  getScrollableNode: FlashList<T>["getScrollableNode"];
+}
+
+/**
+ * FlashList variant that enables rendering of masonry layouts.
+ * If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function.
+ */
+const MasonryFlashListComponent = React.forwardRef(
+  <T,>(
+    /**
+     * Forward Ref will force cast generic parament T to unknown. Export has a explicit cast to solve this.
+     */
+    props: MasonryFlashListProps<T>,
+    forwardRef: React.ForwardedRef<MasonryFlashListRef<T>>
+  ) => {
+    const columnCount = props.numColumns || 1;
+    const drawDistance = props.drawDistance;
+    const estimatedListSize = props.estimatedListSize ??
+      Dimensions.get("window") ?? { height: 500, width: 500 };
+
+    if (props.optimizeItemArrangement && !props.overrideItemLayout) {
+      throw new CustomError(
+        ExceptionList.overrideItemLayoutRequiredForMasonryOptimization
+      );
+    }
+    const dataSet = useDataSet(
+      columnCount,
+      Boolean(props.optimizeItemArrangement),
+      props.data,
+      props.overrideItemLayout,
+      props.extraData
+    );
+
+    const totalColumnFlex = useTotalColumnFlex(dataSet, props);
+
+    const onScrollRef = useRef<OnScrollCallback[]>([]);
+    const emptyScrollEvent = useRef(getEmptyScrollEvent())
+      .current as NativeSyntheticEvent<MasonryFlashListScrollEvent>;
+    const ScrollComponent = useRef(
+      getFlashListScrollView(onScrollRef, () => {
+        return (
+          getListRenderedSize(parentFlashList)?.height ||
+          estimatedListSize.height
+        );
+      })
+    ).current;
+
+    const onScrollProxy = useRef<OnScrollCallback>(
+      (scrollEvent: NativeSyntheticEvent<MasonryFlashListScrollEvent>) => {
+        emptyScrollEvent.nativeEvent.contentOffset.y =
+          scrollEvent.nativeEvent.contentOffset.y -
+          (parentFlashList.current?.firstItemOffset ?? 0);
+        onScrollRef.current?.forEach((onScrollCallback) => {
+          onScrollCallback?.(emptyScrollEvent);
+        });
+        if (!scrollEvent.nativeEvent.doNotPropagate) {
+          props.onScroll?.(scrollEvent);
+        }
+      }
+    ).current;
+
+    /**
+     * We're triggering an onScroll on internal lists so that they register the correct offset which is offset - header size.
+     * This will make sure viewability callbacks are triggered correctly.
+     * 32 ms is equal to two frames at 60 fps. Faster framerates will not cause any problems.
+     */
+    const onLoadForNestedLists = useRef((args: { elapsedTimeInMs: number }) => {
+      setTimeout(() => {
+        emptyScrollEvent.nativeEvent.doNotPropagate = true;
+        onScrollProxy?.(emptyScrollEvent);
+        emptyScrollEvent.nativeEvent.doNotPropagate = false;
+      }, 32);
+      props.onLoad?.(args);
+    }).current;
+
+    const [parentFlashList, getFlashList] =
+      useRefWithForwardRef<FlashList<MasonryListItem<T>[]>>(forwardRef);
+
+    const {
+      renderItem,
+      getItemType,
+      getColumnFlex,
+      overrideItemLayout,
+      viewabilityConfig,
+      keyExtractor,
+      onLoad,
+      onViewableItemsChanged,
+      data,
+      stickyHeaderIndices,
+      CellRendererComponent,
+      ItemSeparatorComponent,
+      ...remainingProps
+    } = props;
+
+    const firstColumnHeight =
+      (dataSet[0]?.length ?? 0) *
+      (props.estimatedItemSize ?? defaultEstimatedItemSize);
+
+    return (
+      <FlashList
+        ref={getFlashList}
+        {...remainingProps}
+        horizontal={false}
+        numColumns={columnCount}
+        data={dataSet}
+        onScroll={onScrollProxy}
+        estimatedItemSize={firstColumnHeight || estimatedListSize.height}
+        renderItem={(args) => {
+          return (
+            <FlashList
+              renderScrollComponent={ScrollComponent}
+              estimatedItemSize={props.estimatedItemSize}
+              data={args.item}
+              onLoad={args.index === 0 ? onLoadForNestedLists : undefined}
+              renderItem={(innerArgs) => {
+                return (
+                  renderItem?.({
+                    ...innerArgs,
+                    item: innerArgs.item.originalItem,
+                    index: innerArgs.item.originalIndex,
+                    columnSpan: 1,
+                    columnIndex: args.index,
+                  }) ?? null
+                );
+              }}
+              keyExtractor={
+                keyExtractor
+                  ? (item, _) => {
+                      return keyExtractor?.(
+                        item.originalItem,
+                        item.originalIndex
+                      );
+                    }
+                  : undefined
+              }
+              getItemType={
+                getItemType
+                  ? (item, _, extraData) => {
+                      return getItemType?.(
+                        item.originalItem,
+                        item.originalIndex,
+                        extraData
+                      );
+                    }
+                  : undefined
+              }
+              drawDistance={drawDistance}
+              estimatedListSize={{
+                height: estimatedListSize.height,
+                width:
+                  ((getListRenderedSize(parentFlashList)?.width ||
+                    estimatedListSize.width) /
+                    totalColumnFlex) *
+                  (getColumnFlex?.(
+                    args.item,
+                    args.index,
+                    columnCount,
+                    props.extraData
+                  ) ?? 1),
+              }}
+              extraData={props.extraData}
+              CellRendererComponent={CellRendererComponent}
+              ItemSeparatorComponent={ItemSeparatorComponent}
+              viewabilityConfig={viewabilityConfig}
+              onViewableItemsChanged={
+                onViewableItemsChanged
+                  ? (info) => {
+                      updateViewTokens(info.viewableItems);
+                      updateViewTokens(info.changed);
+                      onViewableItemsChanged?.(info);
+                    }
+                  : undefined
+              }
+              overrideItemLayout={
+                overrideItemLayout
+                  ? (layout, item, _, __, extraData) => {
+                      overrideItemLayout?.(
+                        layout,
+                        item.originalItem,
+                        item.originalIndex,
+                        columnCount,
+                        extraData
+                      );
+                      layout.span = undefined;
+                    }
+                  : undefined
+              }
+            />
+          );
+        }}
+        overrideItemLayout={
+          getColumnFlex
+            ? (layout, item, index, maxColumns, extraData) => {
+                layout.span =
+                  (columnCount *
+                    getColumnFlex(item, index, maxColumns, extraData)) /
+                  totalColumnFlex;
+              }
+            : undefined
+        }
+      />
+    );
+  }
+);
+
+/**
+ * Splits data for each column's FlashList
+ */
+const useDataSet = <T,>(
+  columnCount: number,
+  optimizeItemArrangement: boolean,
+  sourceData?: FlashListProps<T>["data"],
+  overrideItemLayout?: MasonryFlashListProps<T>["overrideItemLayout"],
+  extraData?: MasonryFlashListProps<T>["extraData"]
+): MasonryListItem<T>[][] => {
+  return useMemo(() => {
+    if (!sourceData || sourceData.length === 0) {
+      return [];
+    }
+    const columnHeightTracker = new Array<number>(columnCount).fill(0);
+    const layoutObject: { size: number | undefined } = { size: undefined };
+    const dataSet = new Array<MasonryListItem<T>[]>(columnCount);
+    const dataSize = sourceData.length;
+
+    for (let i = 0; i < columnCount; i++) {
+      dataSet[i] = [];
+    }
+    for (let i = 0; i < dataSize; i++) {
+      let nextColumnIndex = i % columnCount;
+      if (optimizeItemArrangement) {
+        for (let j = 0; j < columnCount; j++) {
+          if (columnHeightTracker[j] < columnHeightTracker[nextColumnIndex]) {
+            nextColumnIndex = j;
+          }
+        }
+        // update height of column
+        layoutObject.size = undefined;
+        overrideItemLayout!(
+          layoutObject,
+          sourceData[i],
+          i,
+          columnCount,
+          extraData
+        );
+        columnHeightTracker[nextColumnIndex] +=
+          layoutObject.size ?? defaultEstimatedItemSize;
+      }
+      dataSet[nextColumnIndex].push({
+        originalItem: sourceData[i],
+        originalIndex: i,
+      });
+    }
+    return dataSet;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceData, columnCount, optimizeItemArrangement, extraData]);
+};
+
+const useTotalColumnFlex = <T,>(
+  dataSet: MasonryListItem<T>[][],
+  props: MasonryFlashListProps<T>
+): number => {
+  return useMemo(() => {
+    const columnCount = props.numColumns || 1;
+    if (!props.getColumnFlex) {
+      return columnCount;
+    }
+    let totalFlexSum = 0;
+    const dataSize = dataSet.length;
+    for (let i = 0; i < dataSize; i++) {
+      totalFlexSum += props.getColumnFlex(
+        dataSet[i],
+        i,
+        columnCount,
+        props.extraData
+      );
+    }
+    return totalFlexSum;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataSet, props.getColumnFlex, props.extraData]);
+};
+
+/**
+ * Handle both function refs and refs with current property
+ */
+const useRefWithForwardRef = <T,>(
+  forwardRef: any
+): [React.MutableRefObject<T | null>, (instance: T | null) => void] => {
+  const ref: React.MutableRefObject<T | null> = useRef(null);
+  return [
+    ref,
+    useCallback(
+      (instance: T | null) => {
+        ref.current = instance;
+        if (typeof forwardRef === "function") {
+          forwardRef(instance);
+        } else if (forwardRef) {
+          forwardRef.current = instance;
+        }
+      },
+      [forwardRef]
+    ),
+  ];
+};
+
+/**
+ * This ScrollView is actually just a view mimicking a scrollview. We block the onScroll event from being passed to the parent list directly.
+ * We manually drive onScroll from the parent and thus, achieve recycling.
+ */
+const getFlashListScrollView = (
+  onScrollRef: React.RefObject<OnScrollCallback[]>,
+  getParentHeight: () => number
+) => {
+  const FlashListScrollView = React.forwardRef(
+    (props: ScrollViewProps, ref: React.ForwardedRef<View>) => {
+      const { onLayout, onScroll, ...rest } = props;
+      const onLayoutProxy = useCallback(
+        (layoutEvent: LayoutChangeEvent) => {
+          onLayout?.({
+            nativeEvent: {
+              layout: {
+                height: getParentHeight(),
+                width: layoutEvent.nativeEvent.layout.width,
+              },
+            },
+          } as LayoutChangeEvent);
+        },
+        [onLayout]
+      );
+      useEffect(() => {
+        if (onScroll) {
+          onScrollRef.current?.push(onScroll);
+        }
+        return () => {
+          if (!onScrollRef.current || !onScroll) {
+            return;
+          }
+          const indexToDelete = onScrollRef.current.indexOf(onScroll);
+          if (indexToDelete > -1) {
+            onScrollRef.current.splice(indexToDelete, 1);
+          }
+        };
+      }, [onScroll]);
+      return <View ref={ref} {...rest} onLayout={onLayoutProxy} />;
+    }
+  );
+  FlashListScrollView.displayName = "FlashListScrollView";
+  return FlashListScrollView;
+};
+const updateViewTokens = (tokens: ViewToken[]) => {
+  const length = tokens.length;
+  for (let i = 0; i < length; i++) {
+    const token = tokens[i];
+    if (token.index !== null && token.index !== undefined) {
+      token.index = token.item.originalIndex;
+      token.item = token.item.originalItem;
+    }
+  }
+};
+
+const getEmptyScrollEvent = () => {
+  return {
+    nativeEvent: { contentOffset: { y: 0, x: 0 } },
+  };
+};
+const getListRenderedSize = <T,>(
+  parentFlashList: React.MutableRefObject<FlashList<T[]> | null>
+) => {
+  return parentFlashList?.current?.recyclerlistview_unsafe?.getRenderedSize();
+};
+MasonryFlashListComponent.displayName = "MasonryFlashList";
+
+/**
+ * FlashList variant that enables rendering of masonry layouts.
+ * If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function.
+ */
+export const MasonryFlashList = MasonryFlashListComponent as <T>(
+  props: MasonryFlashListProps<T> & {
+    ref?: React.RefObject<MasonryFlashListRef<T>>;
+  }
+) => React.ReactElement;