@shopify/flash-list 2.0.0 → 2.0.2-rc.1

package/dist/FlashListProps.d.ts

@@ -1,6 +1,7 @@
 import type React from "react";
 import { StyleProp, ScrollViewProps, ViewabilityConfig, ViewStyle } from "react-native";
-import ViewToken from "./recyclerview/viewability/ViewToken";
+import { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
+import ViewToken from "./viewability/ViewToken";
 export interface ListRenderItemInfo<TItem> {
     item: TItem;
     index: number;
@@ -20,6 +21,7 @@ export interface OverrideProps {
 export type RenderTarget = "Cell" | "StickyHeader" | "Measurement";
 export declare const RenderTargetOptions: Record<string, RenderTarget>;
 export type ListRenderItem<TItem> = (info: ListRenderItemInfo<TItem>) => React.ReactElement | null;
+export type ContentStyle = Pick<ViewStyle, "backgroundColor" | "paddingTop" | "paddingLeft" | "paddingRight" | "paddingBottom" | "padding" | "paddingVertical" | "paddingHorizontal">;
 export interface ViewabilityConfigCallbackPair<TItem> {
     viewabilityConfig: ViewabilityConfig;
     onViewableItemsChanged: ((info: {
@@ -49,6 +51,13 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      * For simplicity, data is a plain array of items of a given type.
      */
     data: ReadonlyArray<TItem> | null | undefined;
+    /**
+     * Average or median size for elements in the list. Doesn't have to be very accurate but a good estimate can improve performance.
+     * A quick look at `Element Inspector` can help you determine this. If you're confused between two values, the smaller value is a better choice.
+     * For vertical lists provide average height and for horizontal average width.
+     * Read more about it here: https://shopify.github.io/flash-list/docs/estimated-item-size
+     */
+    estimatedItemSize?: number;
     /**
      * Each cell is rendered using this element.
      * Can be a React Component Class, or a render function.
@@ -95,10 +104,29 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      * Rendered as the main scrollview.
      */
     renderScrollComponent?: React.ComponentType<ScrollViewProps> | React.FC<ScrollViewProps>;
+    /**
+     * You can use `contentContainerStyle` to apply padding that will be applied to the whole content itself.
+     * For example, you can apply this padding, so that all of your items have leading and trailing space.
+     */
+    contentContainerStyle?: ContentStyle;
     /**
      * Draw distance for advanced rendering (in dp/px)
      */
     drawDistance?: number;
+    /**
+     * Specifies how far the first item is drawn from start of the list window or, offset of the first item of the list (not the header).
+     * Needed if you're using initialScrollIndex prop. Before the initial draw the list cannot figure out the size of header or, any special margin/padding that might have been applied
+     * using header styles etc.
+     * If this isn't provided initialScrollIndex might not scroll to the provided index.
+     */
+    estimatedFirstItemOffset?: number;
+    /**
+     * Visible height and width of the list. This is not the scroll content size.
+     */
+    estimatedListSize?: {
+        height: number;
+        width: number;
+    };
     /**
      * A marker property for telling the list to re-render (since it implements PureComponent).
      * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
@@ -113,6 +141,10 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      * Instead of starting at the top with the first item, start at initialScrollIndex.
      */
     initialScrollIndex?: number | null | undefined;
+    /**
+     * Reverses the direction of scroll. Uses scale transforms of -1.
+     */
+    inverted?: boolean | null | undefined;
     /**
      * Used to extract a unique key for a given item at the specified index.
      * Key is used for optimizing performance. Defining `keyExtractor` is also necessary
@@ -125,6 +157,17 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      * Items should all be the same height - masonry layouts are not supported.
      */
     numColumns?: number | undefined;
+    /**
+     * Computes blank space that is visible to the user during scroll or list load. If list doesn't have enough items to fill the screen even then this will be raised.
+     * Values reported: {
+     *    offsetStart -> visible blank space on top of the screen (while going up). If value is greater than 0 then it's visible to user.
+     *    offsetEnd -> visible blank space at the end of the screen (while going down). If value is greater than 0 then it's visible to user.
+     *    blankArea -> max(offsetStart, offsetEnd) use this directly and look for values > 0
+     * }
+     * Please note that this event isn't synced with onScroll event but works with native onDraw/layoutSubviews. Events with values > 0 are blanks.
+     * This event is raised even when there is no visible blank with negative values for extensibility however, for most use cases check blankArea > 0 and use the value.
+     */
+    onBlankArea?: BlankAreaEventHandler;
     /**
      * Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
      */
@@ -169,7 +212,11 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      */
     getItemType?: (item: TItem, index: number, extraData?: any) => string | number | undefined;
     /**
-     * This method can be used to change column span of an item.
+     * This method can be used to provide explicit size estimates or change column span of an item.
+     *
+     * Providing specific estimates is a good idea when you can calculate sizes reliably. FlashList will prefer this value over `estimatedItemSize` for that specific item.
+     * Precise estimates will also improve precision of `scrollToIndex` method and `initialScrollIndex` prop. If you have a `separator` below your items you can include its size in the estimate.
+     *
      * Changing item span is useful when you have grid layouts (numColumns > 1) and you want few items to be bigger than the rest.
      *
      * Modify the given layout. Do not return. FlashList will fallback to default values if this is ignored.
@@ -178,6 +225,7 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      */
     overrideItemLayout?: (layout: {
         span?: number;
+        size?: number;
     }, item: TItem, index: number, maxColumns: number, extraData?: any) => void;
     /**
      * For debugging and exception use cases, internal props will be overriden with these values if used
@@ -203,6 +251,19 @@ export interface FlashListProps<TItem> extends Omit<ScrollViewProps, "maintainVi
      * A specific `onViewableItemsChanged` will be called when its corresponding `ViewabilityConfig`'s conditions are met.
      */
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs<TItem> | undefined;
+    /**
+     * FlashList attempts to measure size of horizontal lists by drawing an extra list item in advance. This can sometimes cause issues when used with `initialScrollIndex` in lists
+     * with very little content. You might see some amount of over scroll. When set to true the list's rendered size needs to be deterministic (i.e., height and width greater than 0)
+     * as FlashList will skip rendering the extra item for measurement. Default value is `false`.
+     */
+    disableHorizontalListHeightMeasurement?: boolean;
+    /**
+     * FlashList applies some fixes to layouts of its children which can conflict with custom `CellRendererComponent`
+     * implementations. You can disable this behavior by setting this to `true`.
+     * Recommendation: Set this to `true` while you apply special behavior to the `CellRendererComponent`. Once done set this to
+     * `false` again.
+     */
+    disableAutoLayout?: boolean;
     /**
      * New arch only
      * Maximum number of items in the recycle pool. These are the items that are cached in the recycle pool when they are scrolled off the screen.

package/dist/FlashListProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlashListProps.d.ts","sourceRoot":"","sources":["../src/FlashListProps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"FlashListProps.d.ts","sourceRoot":"","sources":["../src/FlashListProps.ts"],"names":[],"mappings":"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"}

package/dist/FlashListProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlashListProps.js","sourceRoot":"","sources":["../src/FlashListProps.ts"],"names":[],"mappings":";;;AA+Ba,QAAA,mBAAmB,GAAiC;IAC/D,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,cAAc;IAC5B,WAAW,EAAE,aAAa;CAC3B,CAAC"}
+{"version":3,"file":"FlashListProps.js","sourceRoot":"","sources":["../src/FlashListProps.ts"],"names":[],"mappings":";;;AAgCa,QAAA,mBAAmB,GAAiC;IAC/D,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,cAAc;IAC5B,WAAW,EAAE,aAAa;CAC3B,CAAC"}

package/dist/GridLayoutProviderWithProps.d.ts

@@ -0,0 +1,42 @@
+import { Dimension, GridLayoutProvider, Layout, LayoutManager } from "recyclerlistview";
+import { FlashListProps } from "./FlashListProps";
+export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
+    private props;
+    private layoutObject;
+    private averageWindow;
+    private renderWindowInsets;
+    private _hasExpired;
+    defaultEstimatedItemSize: number;
+    constructor(maxSpan: number, getLayoutType: (index: number, props: FlashListProps<T>, mutableLayout: {
+        span?: number;
+        size?: number;
+    }) => string | number, getSpan: (index: number, props: FlashListProps<T>, mutableLayout: {
+        span?: number;
+        size?: number;
+    }) => number, getHeightOrWidth: (index: number, props: FlashListProps<T>, mutableLayout: {
+        span?: number;
+        size?: number;
+    }) => number | undefined, props: FlashListProps<T>, acceptableRelayoutDelta?: number);
+    updateProps(props: FlashListProps<T>): GridLayoutProviderWithProps<T>;
+    /**
+     * This methods returns true if the layout provider has expired and needs to be recreated.
+     * This can happen if the number of columns has changed or the render window size has changed in a way that cannot be handled by the layout provider internally.
+     */
+    get hasExpired(): boolean;
+    /**
+     * Calling this method will mark the layout provider as expired. As a result, a new one will be created by FlashList and old cached layouts will be discarded.
+     */
+    markExpired(): void;
+    /**
+     * Calling this method will help the layout provider track average item sizes on its own
+     * Overriding layout manager can help achieve the same thing without relying on this method being called however, it will make implementation very complex for a simple use case
+     * @param index Index of the item being reported
+     */
+    reportItemLayout(index: number): void;
+    get averageItemSize(): number;
+    newLayoutManager(renderWindowSize: Dimension, isHorizontal?: boolean, cachedLayouts?: Layout[]): LayoutManager;
+    private updateCachedDimensions;
+    private getCleanLayoutObj;
+    private getAdjustedRenderWindowSize;
+}
+//# sourceMappingURL=GridLayoutProviderWithProps.d.ts.map

package/dist/GridLayoutProviderWithProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutProviderWithProps.d.ts","sourceRoot":"","sources":["../src/GridLayoutProviderWithProps.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,kBAAkB,EAClB,MAAM,EACN,aAAa,EACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,CAAC,OAAO,OAAO,2BAA2B,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IAC5E,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,kBAAkB,CAAsC;IAChE,OAAO,CAAC,WAAW,CAAS;IACrB,wBAAwB,SAAO;gBAGpC,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,CACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,aAAa,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAC5C,MAAM,GAAG,MAAM,EACpB,OAAO,EAAE,CACP,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,aAAa,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAC5C,MAAM,EACX,gBAAgB,EAAE,CAChB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,aAAa,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAC5C,MAAM,GAAG,SAAS,EACvB,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,uBAAuB,CAAC,EAAE,MAAM;IA6B3B,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,2BAA2B,CAAC,CAAC,CAAC;IAmB5E;;;OAGG;IACH,IAAW,UAAU,YAEpB;IAED;;OAEG;IACI,WAAW;IAIlB;;;;OAIG;IACI,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAYrC,IAAW,eAAe,WAEzB;IAEM,gBAAgB,CACrB,gBAAgB,EAAE,SAAS,EAC3B,YAAY,CAAC,EAAE,OAAO,EACtB,aAAa,CAAC,EAAE,MAAM,EAAE,GACvB,aAAa;IA0BhB,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,2BAA2B;CAOpC"}

package/dist/GridLayoutProviderWithProps.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var recyclerlistview_1 = require("recyclerlistview");
+var AverageWindow_1 = require("./utils/AverageWindow");
+var ContentContainerUtils_1 = require("./utils/ContentContainerUtils");
+var GridLayoutProviderWithProps = /** @class */ (function (_super) {
+    tslib_1.__extends(GridLayoutProviderWithProps, _super);
+    function GridLayoutProviderWithProps(maxSpan, getLayoutType, getSpan, getHeightOrWidth, props, acceptableRelayoutDelta) {
+        var _a;
+        var _this = _super.call(this, maxSpan, function (i) {
+            return getLayoutType(i, _this.props, _this.getCleanLayoutObj());
+        }, function (i) {
+            return getSpan(i, _this.props, _this.getCleanLayoutObj());
+        }, function (i) {
+            var _a;
+            return (
+            // Using average item size if no override has been provided by the developer
+            (_a = getHeightOrWidth(i, _this.props, _this.getCleanLayoutObj())) !== null && _a !== void 0 ? _a : _this.averageItemSize);
+        }, acceptableRelayoutDelta) || this;
+        _this.layoutObject = { span: undefined, size: undefined };
+        _this.renderWindowInsets = { width: 0, height: 0 };
+        _this._hasExpired = false;
+        _this.defaultEstimatedItemSize = 100;
+        _this.props = props;
+        _this.averageWindow = new AverageWindow_1.AverageWindow(1, (_a = props.estimatedItemSize) !== null && _a !== void 0 ? _a : _this.defaultEstimatedItemSize);
+        _this.renderWindowInsets = _this.getAdjustedRenderWindowSize(_this.renderWindowInsets);
+        return _this;
+    }
+    GridLayoutProviderWithProps.prototype.updateProps = function (props) {
+        var newInsetValues = (0, ContentContainerUtils_1.applyContentContainerInsetForLayoutManager)({
+            height: 0,
+            width: 0,
+        }, props.contentContainerStyle, Boolean(props.horizontal));
+        this._hasExpired =
+            this._hasExpired ||
+                this.props.numColumns !== props.numColumns ||
+                newInsetValues.height !== this.renderWindowInsets.height ||
+                newInsetValues.width !== this.renderWindowInsets.width;
+        this.renderWindowInsets = newInsetValues;
+        this.props = props;
+        return this;
+    };
+    Object.defineProperty(GridLayoutProviderWithProps.prototype, "hasExpired", {
+        /**
+         * This methods returns true if the layout provider has expired and needs to be recreated.
+         * This can happen if the number of columns has changed or the render window size has changed in a way that cannot be handled by the layout provider internally.
+         */
+        get: function () {
+            return this._hasExpired;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Calling this method will mark the layout provider as expired. As a result, a new one will be created by FlashList and old cached layouts will be discarded.
+     */
+    GridLayoutProviderWithProps.prototype.markExpired = function () {
+        this._hasExpired = true;
+    };
+    /**
+     * Calling this method will help the layout provider track average item sizes on its own
+     * Overriding layout manager can help achieve the same thing without relying on this method being called however, it will make implementation very complex for a simple use case
+     * @param index Index of the item being reported
+     */
+    GridLayoutProviderWithProps.prototype.reportItemLayout = function (index) {
+        var _a;
+        var layout = (_a = this.getLayoutManager()) === null || _a === void 0 ? void 0 : _a.getLayouts()[index];
+        if (layout) {
+            // For the same index we can now return different estimates because average is updated in realtime
+            // Marking the layout as overridden will help layout manager avoid using the average after initial measurement
+            layout.isOverridden = true;
+            this.averageWindow.addValue(this.props.horizontal ? layout.width : layout.height);
+        }
+    };
+    Object.defineProperty(GridLayoutProviderWithProps.prototype, "averageItemSize", {
+        get: function () {
+            return this.averageWindow.currentValue;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GridLayoutProviderWithProps.prototype.newLayoutManager = function (renderWindowSize, isHorizontal, cachedLayouts) {
+        var _a;
+        // Average window is updated whenever a new layout manager is created. This is because old values are not relevant anymore.
+        var estimatedItemCount = Math.max(3, Math.round((this.props.horizontal
+            ? renderWindowSize.width
+            : renderWindowSize.height) /
+            ((_a = this.props.estimatedItemSize) !== null && _a !== void 0 ? _a : this.defaultEstimatedItemSize)));
+        this.averageWindow = new AverageWindow_1.AverageWindow(2 * (this.props.numColumns || 1) * estimatedItemCount, this.averageWindow.currentValue);
+        var newLayoutManager = _super.prototype.newLayoutManager.call(this, this.getAdjustedRenderWindowSize(renderWindowSize), isHorizontal, cachedLayouts);
+        if (cachedLayouts) {
+            this.updateCachedDimensions(cachedLayouts, newLayoutManager);
+        }
+        return newLayoutManager;
+    };
+    GridLayoutProviderWithProps.prototype.updateCachedDimensions = function (cachedLayouts, layoutManager) {
+        var layoutCount = cachedLayouts.length;
+        for (var i = 0; i < layoutCount; i++) {
+            cachedLayouts[i] = tslib_1.__assign(tslib_1.__assign({}, cachedLayouts[i]), layoutManager.getStyleOverridesForIndex(i));
+        }
+    };
+    GridLayoutProviderWithProps.prototype.getCleanLayoutObj = function () {
+        this.layoutObject.size = undefined;
+        this.layoutObject.span = undefined;
+        return this.layoutObject;
+    };
+    GridLayoutProviderWithProps.prototype.getAdjustedRenderWindowSize = function (renderWindowSize) {
+        return (0, ContentContainerUtils_1.applyContentContainerInsetForLayoutManager)(tslib_1.__assign({}, renderWindowSize), this.props.contentContainerStyle, Boolean(this.props.horizontal));
+    };
+    return GridLayoutProviderWithProps;
+}(recyclerlistview_1.GridLayoutProvider));
+exports.default = GridLayoutProviderWithProps;
+//# sourceMappingURL=GridLayoutProviderWithProps.js.map

package/dist/GridLayoutProviderWithProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridLayoutProviderWithProps.js","sourceRoot":"","sources":["../src/GridLayoutProviderWithProps.ts"],"names":[],"mappings":"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"}

package/dist/MasonryFlashList.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { NativeScrollEvent } from "react-native";
+import FlashList from "./FlashList";
+import { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
+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" | "renderItem" | "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;
+}
+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.
+ */
+export declare const MasonryFlashList: <T>(props: MasonryFlashListProps<T> & {
+    ref?: React.RefObject<MasonryFlashListRef<T>>;
+}) => React.ReactElement;
+//# sourceMappingURL=MasonryFlashList.d.ts.map

package/dist/MasonryFlashList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryFlashList.d.ts","sourceRoot":"","sources":["../src/MasonryFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAKL,iBAAiB,EAElB,MAAM,cAAc,CAAC;AAItB,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItE,MAAM,WAAW,yBAAyB,CAAC,KAAK,CAC9C,SAAQ,kBAAkB,CAAC,KAAK,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,qBAAqB,CAAC,KAAK,IAAI,CACzC,IAAI,EAAE,yBAAyB,CAAC,KAAK,CAAC,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,WAAW,qBAAqB,CAAC,CAAC,CACtC,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACf,YAAY,GACZ,oBAAoB,GACpB,UAAU,GACV,aAAa,GACb,YAAY,GACZ,gCAAgC,CACnC;IACD;;;OAGG;IACH,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC3B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,SAAS,CAAC,EAAE,GAAG,KACZ,MAAM,CAAC;IAEZ;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;;;OAKG;IACH,UAAU,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACzD;AAKD,MAAM,WAAW,2BAA4B,SAAQ,iBAAiB;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC/C,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACzC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;CACtD;AAiYD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAgC,CAAC,CAAC,EAC7D,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAChC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;CAC/C,KACE,KAAK,CAAC,YAAY,CAAC"}

package/dist/MasonryFlashList.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasonryFlashList = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_native_1 = require("react-native");
+var CustomError_1 = tslib_1.__importDefault(require("./errors/CustomError"));
+var ExceptionList_1 = tslib_1.__importDefault(require("./errors/ExceptionList"));
+var FlashList_1 = tslib_1.__importDefault(require("./FlashList"));
+var ContentContainerUtils_1 = require("./utils/ContentContainerUtils");
+var defaultEstimatedItemSize = 100;
+/**
+ * FlashList variant that enables rendering of masonry layouts.
+ * If you want `MasonryFlashList` to optimize item arrangement, enable `optimizeItemArrangement` and pass a valid `overrideItemLayout` function.
+ */
+var MasonryFlashListComponent = react_1.default.forwardRef(function (
+/**
+ * Forward Ref will force cast generic parament T to unknown. Export has a explicit cast to solve this.
+ */
+props, forwardRef) {
+    var _a, _b, _c, _d, _e;
+    var columnCount = props.numColumns || 1;
+    var drawDistance = props.drawDistance;
+    var estimatedListSize = (_b = (_a = props.estimatedListSize) !== null && _a !== void 0 ? _a : react_native_1.Dimensions.get("window")) !== null && _b !== void 0 ? _b : { height: 500, width: 500 };
+    if (props.optimizeItemArrangement && !props.overrideItemLayout) {
+        throw new CustomError_1.default(ExceptionList_1.default.overrideItemLayoutRequiredForMasonryOptimization);
+    }
+    var dataSet = useDataSet(columnCount, Boolean(props.optimizeItemArrangement), props.data, props.overrideItemLayout, props.extraData);
+    var totalColumnFlex = useTotalColumnFlex(dataSet, props);
+    var propsRef = (0, react_1.useRef)(props);
+    propsRef.current = props;
+    var onScrollRef = (0, react_1.useRef)([]);
+    var emptyScrollEvent = (0, react_1.useRef)(getEmptyScrollEvent())
+        .current;
+    var ScrollComponent = (0, react_1.useRef)(getFlashListScrollView(onScrollRef, function () {
+        var _a;
+        return (((_a = getListRenderedSize(parentFlashList)) === null || _a === void 0 ? void 0 : _a.height) ||
+            estimatedListSize.height);
+    })).current;
+    var onScrollProxy = (0, react_1.useRef)(function (scrollEvent) {
+        var _a, _b, _c, _d, _e;
+        emptyScrollEvent.nativeEvent.contentOffset.y =
+            scrollEvent.nativeEvent.contentOffset.y -
+                ((_b = (_a = parentFlashList.current) === null || _a === void 0 ? void 0 : _a.firstItemOffset) !== null && _b !== void 0 ? _b : 0);
+        (_c = onScrollRef.current) === null || _c === void 0 ? void 0 : _c.forEach(function (onScrollCallback) {
+            onScrollCallback === null || onScrollCallback === void 0 ? void 0 : onScrollCallback(emptyScrollEvent);
+        });
+        if (!scrollEvent.nativeEvent.doNotPropagate) {
+            (_e = (_d = propsRef.current).onScroll) === null || _e === void 0 ? void 0 : _e.call(_d, 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.
+     */
+    var onLoadForNestedLists = (0, react_1.useRef)(function (args) {
+        var _a, _b;
+        setTimeout(function () {
+            emptyScrollEvent.nativeEvent.doNotPropagate = true;
+            onScrollProxy === null || onScrollProxy === void 0 ? void 0 : onScrollProxy(emptyScrollEvent);
+            emptyScrollEvent.nativeEvent.doNotPropagate = false;
+        }, 32);
+        (_b = (_a = propsRef.current).onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, args);
+    }).current;
+    var _f = tslib_1.__read(useRefWithForwardRef(forwardRef), 2), parentFlashList = _f[0], getFlashList = _f[1];
+    var renderItem = props.renderItem, getItemType = props.getItemType, getColumnFlex = props.getColumnFlex, overrideItemLayout = props.overrideItemLayout, viewabilityConfig = props.viewabilityConfig, keyExtractor = props.keyExtractor, onLoad = props.onLoad, onViewableItemsChanged = props.onViewableItemsChanged, data = props.data, stickyHeaderIndices = props.stickyHeaderIndices, CellRendererComponent = props.CellRendererComponent, ItemSeparatorComponent = props.ItemSeparatorComponent, remainingProps = tslib_1.__rest(props, ["renderItem", "getItemType", "getColumnFlex", "overrideItemLayout", "viewabilityConfig", "keyExtractor", "onLoad", "onViewableItemsChanged", "data", "stickyHeaderIndices", "CellRendererComponent", "ItemSeparatorComponent"]);
+    var firstColumnHeight = ((_d = (_c = dataSet[0]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) *
+        ((_e = props.estimatedItemSize) !== null && _e !== void 0 ? _e : defaultEstimatedItemSize);
+    var insetForLayoutManager = (0, ContentContainerUtils_1.applyContentContainerInsetForLayoutManager)({ height: 0, width: 0 }, props.contentContainerStyle, false);
+    return (react_1.default.createElement(FlashList_1.default, tslib_1.__assign({ ref: getFlashList }, remainingProps, { horizontal: false, numColumns: columnCount, data: dataSet, onScroll: onScrollProxy, estimatedItemSize: firstColumnHeight || estimatedListSize.height, renderItem: function (args) {
+            var _a, _b;
+            return (react_1.default.createElement(FlashList_1.default, { renderScrollComponent: ScrollComponent, estimatedItemSize: props.estimatedItemSize, data: args.item, onLoad: args.index === 0 ? onLoadForNestedLists : undefined, renderItem: function (innerArgs) {
+                    var _a;
+                    return ((_a = renderItem === null || renderItem === void 0 ? void 0 : renderItem(tslib_1.__assign(tslib_1.__assign({}, innerArgs), { item: innerArgs.item.originalItem, index: innerArgs.item.originalIndex, columnSpan: 1, columnIndex: args.index }))) !== null && _a !== void 0 ? _a : null);
+                }, keyExtractor: keyExtractor
+                    ? function (item, _) {
+                        return keyExtractor === null || keyExtractor === void 0 ? void 0 : keyExtractor(item.originalItem, item.originalIndex);
+                    }
+                    : undefined, getItemType: getItemType
+                    ? function (item, _, extraData) {
+                        return getItemType === null || getItemType === void 0 ? void 0 : getItemType(item.originalItem, item.originalIndex, extraData);
+                    }
+                    : undefined, drawDistance: drawDistance, estimatedListSize: {
+                    height: estimatedListSize.height,
+                    width: (((((_a = getListRenderedSize(parentFlashList)) === null || _a === void 0 ? void 0 : _a.width) ||
+                        estimatedListSize.width) +
+                        insetForLayoutManager.width) /
+                        totalColumnFlex) *
+                        ((_b = getColumnFlex === null || getColumnFlex === void 0 ? void 0 : getColumnFlex(args.item, args.index, columnCount, props.extraData)) !== null && _b !== void 0 ? _b : 1),
+                }, extraData: props.extraData, CellRendererComponent: CellRendererComponent, ItemSeparatorComponent: ItemSeparatorComponent, viewabilityConfig: viewabilityConfig, onViewableItemsChanged: onViewableItemsChanged
+                    ? function (info) {
+                        updateViewTokens(info.viewableItems);
+                        updateViewTokens(info.changed);
+                        onViewableItemsChanged === null || onViewableItemsChanged === void 0 ? void 0 : onViewableItemsChanged(info);
+                    }
+                    : undefined, overrideItemLayout: overrideItemLayout
+                    ? function (layout, item, _, __, extraData) {
+                        overrideItemLayout === null || overrideItemLayout === void 0 ? void 0 : overrideItemLayout(layout, item.originalItem, item.originalIndex, columnCount, extraData);
+                        layout.span = undefined;
+                    }
+                    : undefined }));
+        }, overrideItemLayout: getColumnFlex
+            ? function (layout, item, index, maxColumns, extraData) {
+                layout.span =
+                    (columnCount *
+                        getColumnFlex(item, index, maxColumns, extraData)) /
+                        totalColumnFlex;
+            }
+            : undefined })));
+});
+/**
+ * Splits data for each column's FlashList
+ */
+var useDataSet = function (columnCount, optimizeItemArrangement, sourceData, overrideItemLayout, extraData) {
+    return (0, react_1.useMemo)(function () {
+        var _a;
+        if (!sourceData || sourceData.length === 0) {
+            return [];
+        }
+        var columnHeightTracker = new Array(columnCount).fill(0);
+        var layoutObject = { size: undefined };
+        var dataSet = new Array(columnCount);
+        var dataSize = sourceData.length;
+        for (var i = 0; i < columnCount; i++) {
+            dataSet[i] = [];
+        }
+        for (var i = 0; i < dataSize; i++) {
+            var nextColumnIndex = i % columnCount;
+            if (optimizeItemArrangement) {
+                for (var 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] +=
+                    (_a = layoutObject.size) !== null && _a !== void 0 ? _a : defaultEstimatedItemSize;
+            }
+            dataSet[nextColumnIndex].push({
+                originalItem: sourceData[i],
+                originalIndex: i,
+            });
+        }
+        return dataSet;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sourceData, columnCount, optimizeItemArrangement, extraData]);
+};
+var useTotalColumnFlex = function (dataSet, props) {
+    return (0, react_1.useMemo)(function () {
+        var columnCount = props.numColumns || 1;
+        if (!props.getColumnFlex) {
+            return columnCount;
+        }
+        var totalFlexSum = 0;
+        var dataSize = dataSet.length;
+        for (var 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
+ */
+var useRefWithForwardRef = function (forwardRef) {
+    var ref = (0, react_1.useRef)(null);
+    return [
+        ref,
+        (0, react_1.useCallback)(function (instance) {
+            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.
+ */
+var getFlashListScrollView = function (onScrollRef, getParentHeight) {
+    var FlashListScrollView = react_1.default.forwardRef(function (props, ref) {
+        var onLayout = props.onLayout, onScroll = props.onScroll, rest = tslib_1.__rest(props, ["onLayout", "onScroll"]);
+        var onLayoutProxy = (0, react_1.useCallback)(function (layoutEvent) {
+            onLayout === null || onLayout === void 0 ? void 0 : onLayout({
+                nativeEvent: {
+                    layout: {
+                        height: getParentHeight(),
+                        width: layoutEvent.nativeEvent.layout.width,
+                    },
+                },
+            });
+        }, [onLayout]);
+        (0, react_1.useEffect)(function () {
+            var _a;
+            if (onScroll) {
+                (_a = onScrollRef.current) === null || _a === void 0 ? void 0 : _a.push(onScroll);
+            }
+            return function () {
+                if (!onScrollRef.current || !onScroll) {
+                    return;
+                }
+                var indexToDelete = onScrollRef.current.indexOf(onScroll);
+                if (indexToDelete > -1) {
+                    onScrollRef.current.splice(indexToDelete, 1);
+                }
+            };
+        }, [onScroll]);
+        return react_1.default.createElement(react_native_1.View, tslib_1.__assign({ ref: ref }, rest, { onLayout: onLayoutProxy }));
+    });
+    FlashListScrollView.displayName = "FlashListScrollView";
+    return FlashListScrollView;
+};
+var updateViewTokens = function (tokens) {
+    var length = tokens.length;
+    for (var i = 0; i < length; i++) {
+        var token = tokens[i];
+        if (token.index !== null && token.index !== undefined) {
+            if (token.item) {
+                token.index = token.item.originalIndex;
+                token.item = token.item.originalItem;
+            }
+            else {
+                token.index = null;
+                token.item = undefined;
+            }
+        }
+    }
+};
+var getEmptyScrollEvent = function () {
+    return {
+        nativeEvent: { contentOffset: { y: 0, x: 0 } },
+    };
+};
+var getListRenderedSize = function (parentFlashList) {
+    var _a, _b;
+    return (_b = (_a = parentFlashList === null || parentFlashList === void 0 ? void 0 : parentFlashList.current) === null || _a === void 0 ? void 0 : _a.recyclerlistview_unsafe) === null || _b === void 0 ? void 0 : _b.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.
+ */
+exports.MasonryFlashList = MasonryFlashListComponent;
+//# sourceMappingURL=MasonryFlashList.js.map