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

package/src/MasonryFlashList.tsx

@@ -0,0 +1,476 @@
+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 as any);
+                    }
+                  : 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<any>[]) => {
+  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;

package/src/PureComponentWrapper.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export interface PureComponentWrapperProps {
+  renderer: (arg: unknown) => JSX.Element | null;
+
+  /** Renderer is called with this argument.
+   * Don't change this value everytime or else component will always rerender. Prefer primitives. */
+  arg?: unknown;
+  enabled?: boolean;
+  [other: string]: unknown;
+}
+
+/**
+ * Pure component wrapper that can be used to prevent renders of the `renderer` method passed to the component. Any change in props will lead to `renderer` getting called.
+ */
+export class PureComponentWrapper extends React.PureComponent<PureComponentWrapperProps> {
+  static defaultProps = {
+    enabled: true,
+  };
+
+  private overrideEnabled: boolean | undefined = undefined;
+
+  /** Once set explicitly, prop will be ignored. Not using state because of performance reasons. */
+  public setEnabled(enabled: boolean) {
+    if (enabled !== this.overrideEnabled) {
+      this.overrideEnabled = enabled;
+      this.forceUpdate();
+    }
+  }
+
+  render() {
+    if (this.overrideEnabled === undefined) {
+      return (
+        (this.props.enabled && this.props.renderer(this.props.arg)) || null
+      );
+    } else {
+      return (
+        (this.overrideEnabled && this.props.renderer(this.props.arg)) || null
+      );
+    }
+  }
+}

package/src/__tests__/ContentContainerUtils.test.ts

@@ -0,0 +1,130 @@
+import {
+  applyContentContainerInsetForLayoutManager,
+  getContentContainerPadding,
+  hasUnsupportedKeysInContentContainerStyle,
+  updateContentStyle,
+} from "../utils/ContentContainerUtils";
+
+describe("ContentContainerUtils", () => {
+  it("detects unsupported keys in style", () => {
+    expect(hasUnsupportedKeysInContentContainerStyle({ flex: 1 })).toBe(true);
+    expect(hasUnsupportedKeysInContentContainerStyle({ paddingTop: 0 })).toBe(
+      false
+    );
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({
+        paddingTop: 1,
+        paddingVertical: 1,
+      })
+    ).toBe(false);
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({
+        paddingTop: 1,
+        paddingVertical: 1,
+        padding: 1,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingBottom: 1,
+        backgroundColor: "red",
+        paddingHorizontal: 1,
+      })
+    ).toBe(false);
+    expect(hasUnsupportedKeysInContentContainerStyle({ margin: 1 })).toBe(true);
+    expect(hasUnsupportedKeysInContentContainerStyle({ padding: 1 })).toBe(
+      false
+    );
+    expect(
+      hasUnsupportedKeysInContentContainerStyle({ backgroundColor: "red" })
+    ).toBe(false);
+  });
+  it("updated content style to have all supported styles defined", () => {
+    expect(
+      updateContentStyle({}, { padding: 1, backgroundColor: "red" })
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      backgroundColor: "red",
+    });
+    expect(updateContentStyle({}, { paddingHorizontal: 1 })).toEqual({
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+    expect(updateContentStyle({}, { paddingVertical: 1 })).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 0,
+      paddingRight: 0,
+    });
+    expect(
+      updateContentStyle({}, { paddingLeft: 1, paddingVertical: 1 })
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: 1,
+      paddingRight: 0,
+    });
+  });
+  it("computes correct layout manager insets", () => {
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { padding: 1 },
+        false
+      )
+    ).toEqual({ height: 0, width: -2 });
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { padding: 1 },
+        true
+      )
+    ).toEqual({ height: -2, width: 0 });
+    expect(
+      applyContentContainerInsetForLayoutManager(
+        { height: 0, width: 0 },
+        { paddingVertical: 1 },
+        true
+      )
+    ).toEqual({ height: -2, width: 0 });
+  });
+  it("calculated correct padding for scrollview content", () => {
+    expect(
+      getContentContainerPadding(
+        {
+          paddingLeft: 1,
+          paddingTop: 1,
+          paddingBottom: 1,
+          paddingRight: 1,
+          backgroundColor: "red",
+        },
+        true
+      )
+    ).toEqual({
+      paddingTop: 1,
+      paddingBottom: 1,
+      paddingLeft: undefined,
+      paddingRight: undefined,
+    });
+    expect(
+      getContentContainerPadding(
+        {
+          paddingLeft: 1,
+          paddingTop: 1,
+          paddingBottom: 1,
+          paddingRight: 1,
+          backgroundColor: "red",
+        },
+        false
+      )
+    ).toEqual({
+      paddingTop: undefined,
+      paddingBottom: undefined,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+  });
+});