@react-native-ohos/flash-list 1.8.3-rc.5 → 2.1.1-rc.1

package/src/GridLayoutProviderWithProps.ts

@@ -1,204 +0,0 @@
-/**
- * MIT License
- *
- * Copyright (C) 2024 Huawei Device Co., Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import {
-  Dimension,
-  GridLayoutProvider,
-  Layout,
-  LayoutManager,
-} from "recyclerlistview";
-
-import { FlashListProps } from "./FlashListProps";
-import { AverageWindow } from "./utils/AverageWindow";
-import { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
-
-export default class GridLayoutProviderWithProps<T> extends GridLayoutProvider {
-  private props: FlashListProps<T>;
-  private layoutObject = { span: undefined, size: undefined };
-  private averageWindow: AverageWindow;
-  private renderWindowInsets: Dimension = { width: 0, height: 0 };
-  private _hasExpired = false;
-  public defaultEstimatedItemSize = 100;
-
-  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
-  ) {
-    super(
-      maxSpan,
-      (i) => {
-        return getLayoutType(i, this.props, this.getCleanLayoutObj());
-      },
-      (i) => {
-        return getSpan(i, this.props, this.getCleanLayoutObj());
-      },
-      (i) => {
-        return (
-          // Using average item size if no override has been provided by the developer
-          getHeightOrWidth(i, this.props, this.getCleanLayoutObj()) ??
-          this.averageItemSize
-        );
-      },
-      acceptableRelayoutDelta
-    );
-    this.props = props;
-    this.averageWindow = new AverageWindow(
-      1,
-      props.estimatedItemSize ?? this.defaultEstimatedItemSize
-    );
-    this.renderWindowInsets = this.getAdjustedRenderWindowSize(
-      this.renderWindowInsets
-    );
-  }
-
-  public updateProps(props: FlashListProps<T>): GridLayoutProviderWithProps<T> {
-    const newInsetValues = 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;
-  }
-
-  /**
-   * 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.
-   */
-  public get hasExpired() {
-    return this._hasExpired;
-  }
-
-  /**
-   * 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.
-   */
-  public markExpired() {
-    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
-   */
-  public reportItemLayout(index: number) {
-    const layout = this.getLayoutManager()?.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
-      );
-    }
-  }
-
-  public get averageItemSize() {
-    return this.averageWindow.currentValue;
-  }
-
-  public newLayoutManager(
-    renderWindowSize: Dimension,
-    isHorizontal?: boolean,
-    cachedLayouts?: Layout[]
-  ): LayoutManager {
-    // Average window is updated whenever a new layout manager is created. This is because old values are not relevant anymore.
-    const estimatedItemCount = Math.max(
-      3,
-      Math.round(
-        (this.props.horizontal
-          ? renderWindowSize.width
-          : renderWindowSize.height) /
-          (this.props.estimatedItemSize ?? this.defaultEstimatedItemSize)
-      )
-    );
-    this.averageWindow = new AverageWindow(
-      2 * (this.props.numColumns || 1) * estimatedItemCount,
-      this.averageWindow.currentValue
-    );
-    const newLayoutManager = super.newLayoutManager(
-      this.getAdjustedRenderWindowSize(renderWindowSize),
-      isHorizontal,
-      cachedLayouts
-    );
-    if (cachedLayouts) {
-      this.updateCachedDimensions(cachedLayouts, newLayoutManager);
-    }
-    return newLayoutManager;
-  }
-
-  private updateCachedDimensions(
-    cachedLayouts: Layout[],
-    layoutManager: LayoutManager
-  ) {
-    const layoutCount = cachedLayouts.length;
-    for (let i = 0; i < layoutCount; i++) {
-      cachedLayouts[i] = {
-        ...cachedLayouts[i],
-        // helps in updating the fixed dimension of layouts e.g, width in case of horizontal list
-        // updating them in advance will make sure layout manager won't try to fit more items in the same row or column
-        ...layoutManager.getStyleOverridesForIndex(i),
-      };
-    }
-  }
-
-  private getCleanLayoutObj() {
-    this.layoutObject.size = undefined;
-    this.layoutObject.span = undefined;
-    return this.layoutObject;
-  }
-
-  private getAdjustedRenderWindowSize(renderWindowSize: Dimension) {
-    return applyContentContainerInsetForLayoutManager(
-      { ...renderWindowSize },
-      this.props.contentContainerStyle,
-      Boolean(this.props.horizontal)
-    );
-  }
-}

package/src/MasonryFlashList.tsx

@@ -1,499 +0,0 @@
-/**
- * MIT License
- *
- * Copyright (C) 2024 Huawei Device Co., Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-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 { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
-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"
-    | "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;
-}
-
-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 propsRef = useRef(props);
-    propsRef.current = 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) {
-          propsRef.current.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);
-      propsRef.current.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);
-
-    const insetForLayoutManager = applyContentContainerInsetForLayoutManager(
-      { height: 0, width: 0 },
-      props.contentContainerStyle,
-      false
-    );
-
-    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) +
-                    insetForLayoutManager.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) {
-      if (token.item) {
-        token.index = token.item.originalIndex;
-        token.item = token.item.originalItem;
-      } else {
-        token.index = null;
-        token.item = undefined;
-      }
-    }
-  }
-};
-
-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;