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

package/src/__tests__/GridLayoutProviderWithProps.test.ts

@@ -0,0 +1,179 @@
+import { ScrollView } from "react-native";
+import { ProgressiveListView } from "recyclerlistview";
+
+import FlashList from "../FlashList";
+
+import { mountFlashList } from "./helpers/mountFlashList";
+
+describe("GridLayoutProviderWithProps", () => {
+  it("updates average window on layout manager change", () => {
+    const flashList = mountFlashList();
+    const oldAverageWindow = (flashList.instance as FlashList<any>).state
+      .layoutProvider["averageWindow"];
+
+    // width change from default 400 to 600 will force layout manager to change
+    flashList.find(ScrollView)?.trigger("onLayout", {
+      nativeEvent: { layout: { height: 900, width: 600 } },
+    });
+
+    const newAverageWindow =
+      flashList.instance.state.layoutProvider["averageWindow"];
+
+    expect(newAverageWindow).not.toBe(oldAverageWindow);
+    flashList.unmount();
+  });
+  it("average window's size is two times the number of items that will fill the screen", () => {
+    const flashList = mountFlashList({ numColumns: 2 });
+    expect(
+      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
+        .length
+    ).toBe(20);
+    flashList.find(ScrollView)?.trigger("onLayout", {
+      nativeEvent: { layout: { height: 2000, width: 600 } },
+    });
+    expect(
+      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
+        .length
+    ).toBe(40);
+    flashList.setProps({ numColumns: 1 });
+    expect(
+      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
+        .length
+    ).toBe(20);
+    flashList.unmount();
+  });
+  it("average window should not be less than 6 in size", () => {
+    const flashList = mountFlashList();
+    flashList.find(ScrollView)?.trigger("onLayout", {
+      nativeEvent: { layout: { height: 100, width: 100 } },
+    });
+    expect(
+      flashList.instance.state.layoutProvider["averageWindow"]["inputValues"]
+        .length
+    ).toBe(6);
+    flashList.unmount();
+  });
+  it("vertical list: average should not update when widths change", () => {
+    const flashList = mountFlashList();
+    const layoutProvider = flashList.instance.state.layoutProvider;
+    const oldAverage = layoutProvider.averageItemSize;
+
+    layoutProvider.getLayoutManager()!.getLayouts()[0].width = 500;
+    flashList.find(ProgressiveListView)?.instance.onItemLayout(0);
+
+    expect(oldAverage).toBe(layoutProvider.averageItemSize);
+    flashList.unmount();
+  });
+  it("horizontal list: average should not update when heights change", () => {
+    const flashList = mountFlashList({ horizontal: true });
+    const layoutProvider = flashList.instance.state.layoutProvider;
+    const oldAverage = layoutProvider.averageItemSize;
+
+    layoutProvider.getLayoutManager()!.getLayouts()[0].height = 600;
+
+    // Can throw a no op set state warning. Should be handled in PLV.
+    flashList.find(ProgressiveListView)?.instance.onItemLayout(0);
+
+    expect(oldAverage).toBe(layoutProvider.averageItemSize);
+    flashList.unmount();
+  });
+  it("computes correct average", () => {
+    const flashList = mountFlashList();
+    const layoutProvider = flashList.instance.state.layoutProvider;
+    expect(layoutProvider.averageItemSize).toBe(200);
+
+    const layouts = layoutProvider.getLayoutManager()!.getLayouts();
+    const progressiveListView = flashList.find(ProgressiveListView);
+    layouts[0].height = 100;
+    layouts[1].height = 200;
+    layouts[2].height = 300;
+    layouts[3].height = 400;
+    progressiveListView?.instance.onItemLayout(0);
+    progressiveListView?.instance.onItemLayout(1);
+    progressiveListView?.instance.onItemLayout(2);
+    progressiveListView?.instance.onItemLayout(3);
+
+    // estimatedItemSize is treated as one of the values. That's why 240.
+    expect(layoutProvider.averageItemSize).toBe(240);
+    flashList.unmount();
+  });
+  it("updates all cached widths for vertical list and heights for horizontal list when orientation changes", () => {
+    const runCacheUpdateTest = (horizontal: boolean) => {
+      const flashList = mountFlashList({
+        data: new Array(20).fill("1"),
+        horizontal,
+      });
+      const progressiveListView = flashList.find(ProgressiveListView);
+      const layoutProvider = flashList.instance.state.layoutProvider;
+
+      layoutProvider
+        .getLayoutManager()!
+        .getLayouts()
+        .forEach((layout, index) => {
+          // marking layouts as if they're actual rendered sizes
+          progressiveListView?.instance.onItemLayout(index);
+
+          // checking size
+          if (horizontal) {
+            expect(layout.height).toBe(900);
+          } else {
+            expect(layout.width).toBe(400);
+          }
+        });
+
+      // simulates orientation change
+      flashList.find(ScrollView)?.trigger("onLayout", {
+        nativeEvent: { layout: { height: 400, width: 900 } },
+      });
+
+      layoutProvider
+        .getLayoutManager()!
+        .getLayouts()
+        .forEach((layout) => {
+          // making sure all widths or heights are updated
+          if (horizontal) {
+            expect(layout.height).toBe(400);
+          } else {
+            expect(layout.width).toBe(900);
+          }
+
+          // making sure extra keys don't make their way to layout unnecessarily
+          expect(Object.keys(layout).length).toBe(6);
+        });
+      flashList.unmount();
+    };
+    // vertical list
+    runCacheUpdateTest(false);
+    // horizontal list
+    runCacheUpdateTest(true);
+  });
+  it("expires if column count or padding changes", () => {
+    const flashList = mountFlashList();
+    const baseProps = flashList.instance.props;
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingTop: 10 },
+      }).hasExpired
+    ).toBe(false);
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingBottom: 10 },
+      }).hasExpired
+    ).toBe(false);
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        contentContainerStyle: { paddingLeft: 10 },
+      }).hasExpired
+    ).toBe(true);
+    flashList.instance.state.layoutProvider["_hasExpired"] = false;
+    expect(
+      flashList.instance.state.layoutProvider.updateProps({
+        ...baseProps,
+        numColumns: 2,
+      }).hasExpired
+    ).toBe(true);
+  });
+});

package/src/__tests__/MasonryFlashList.test.ts

@@ -0,0 +1,292 @@
+import { ScrollView, Text, View } from "react-native";
+import "@quilted/react-testing/matchers";
+import { ProgressiveListView } from "recyclerlistview";
+import React from "react";
+
+import {
+  MasonryFlashListProps,
+  MasonryFlashListRef,
+} from "../MasonryFlashList";
+import FlashList from "../FlashList";
+
+import { mountMasonryFlashList } from "./helpers/mountMasonryFlashList";
+
+describe("MasonryFlashList", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  it("renders items and has 3 internal lists", () => {
+    const masonryFlashList = mountMasonryFlashList();
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
+    expect(masonryFlashList).toContainReactComponent(Text, { children: "One" });
+    expect(masonryFlashList).toContainReactComponent(ProgressiveListView, {
+      isHorizontal: false,
+    });
+    masonryFlashList.unmount();
+  });
+  it("invokes renderItem with columnIndex and columnSpan", () => {
+    const mockRenderItem = jest.fn(() => null);
+    const masonryFlashList = mountMasonryFlashList({
+      renderItem: mockRenderItem,
+      data: ["One", "Two", "Three"],
+      numColumns: 3,
+    });
+    expect(mockRenderItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        columnIndex: 0,
+        columnSpan: 1,
+      })
+    );
+
+    expect(mockRenderItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        columnIndex: 1,
+        columnSpan: 1,
+      })
+    );
+
+    expect(mockRenderItem).toHaveBeenCalledWith(
+      expect.objectContaining({
+        columnSpan: 1,
+        columnIndex: 2,
+      })
+    );
+    masonryFlashList.unmount();
+  });
+  it("raised onLoad event only when first internal child mounts", () => {
+    const onLoadMock = jest.fn();
+    const ref = React.createRef<MasonryFlashListRef<string>>();
+    const masonryFlashList = mountMasonryFlashList(
+      {
+        onLoad: onLoadMock,
+      },
+      ref
+    );
+    expect(onLoadMock).not.toHaveBeenCalled();
+    masonryFlashList.findAll(ProgressiveListView)[1]?.instance.onItemLayout(0);
+    expect(onLoadMock).toHaveBeenCalledTimes(1);
+
+    // on load shouldn't be passed to wrapper list
+    expect((ref.current as FlashList<string>).props.onLoad).toBeUndefined();
+    masonryFlashList.unmount();
+  });
+  it("can resize columns using getColumnFlex", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      getColumnFlex: (_, column) => (column === 0 ? 1 : 3),
+    });
+    const progressiveListView =
+      masonryFlashList.find(ProgressiveListView)!.instance;
+    expect(progressiveListView.getLayout(0).width).toBe(100);
+    expect(progressiveListView.getLayout(1).width).toBe(300);
+
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
+    masonryFlashList.findAll(ProgressiveListView).forEach((plv, index) => {
+      if (index === 1) {
+        expect(plv.instance.props.layoutSize.width).toBe(100);
+      }
+      if (index === 2) {
+        expect(plv.instance.props.layoutSize.width).toBe(300);
+      }
+    });
+    masonryFlashList.unmount();
+  });
+  it("mounts a single ScrollView", () => {
+    const masonryFlashList = mountMasonryFlashList();
+    expect(masonryFlashList.findAll(ScrollView)).toHaveLength(1);
+    masonryFlashList.unmount();
+  });
+  it("forwards single onScroll event to external listener", () => {
+    const onScrollMock = jest.fn();
+    const masonryFlashList = mountMasonryFlashList({
+      onScroll: onScrollMock,
+    });
+    masonryFlashList.find(ScrollView)?.instance.props.onScroll({
+      nativeEvent: { contentOffset: { x: 0, y: 0 } },
+    });
+    expect(onScrollMock).toHaveBeenCalledTimes(1);
+    masonryFlashList.unmount();
+  });
+  it("updates scroll offset of all internal lists", () => {
+    const onScrollMock = jest.fn();
+    const masonryFlashList = mountMasonryFlashList({
+      onScroll: onScrollMock,
+    });
+    masonryFlashList.find(ScrollView)?.instance.props.onScroll({
+      nativeEvent: { contentOffset: { x: 0, y: 100 } },
+    });
+    masonryFlashList.findAll(ProgressiveListView).forEach((list) => {
+      expect(list.instance.getCurrentScrollOffset()).toBe(100);
+    });
+    masonryFlashList.unmount();
+  });
+  it("has a valid ref object", () => {
+    const ref = React.createRef<MasonryFlashListRef<string>>();
+    const masonryFlashList = mountMasonryFlashList({}, ref);
+    expect(ref.current).toBeDefined();
+    masonryFlashList.unmount();
+  });
+  it("forwards overrideItemLayout to internal lists", () => {
+    const overrideItemLayout = jest.fn((layout) => {
+      layout.size = 300;
+    });
+    const masonryFlashList = mountMasonryFlashList({
+      overrideItemLayout,
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
+    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
+      if (index !== 0) {
+        expect(list.instance.getLayout(0).height).toBe(300);
+      }
+    });
+    masonryFlashList.unmount();
+  });
+  it("forwards keyExtractor to internal list", () => {
+    const keyExtractor = (_: string, index: number) => (index + 1).toString();
+    const masonryFlashList = mountMasonryFlashList({
+      keyExtractor,
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
+    expect(
+      masonryFlashList
+        .findAll(ProgressiveListView)[0]
+        .instance.props.dataProvider.getStableId(0)
+    ).toBe("0");
+    expect(
+      masonryFlashList
+        .findAll(ProgressiveListView)[1]
+        .instance.props.dataProvider.getStableId(0)
+    ).toBe("1");
+    expect(
+      masonryFlashList
+        .findAll(ProgressiveListView)[2]
+        .instance.props.dataProvider.getStableId(0)
+    ).toBe("2");
+    masonryFlashList.unmount();
+  });
+  it("correctly maps list indices to actual indices", () => {
+    const data = new Array(20).fill(0).map((_, index) => index.toString());
+    const getItemType = (item: string, index: number) => {
+      expect(index.toString()).toBe(item);
+      return 0;
+    };
+    const renderItem: MasonryFlashListProps<string>["renderItem"] = ({
+      item,
+      index,
+    }) => {
+      expect(index.toString()).toBe(item);
+      return null;
+    };
+    const overrideItemLayout: MasonryFlashListProps<string>["overrideItemLayout"] =
+      (layout, item: string, index: number) => {
+        expect(index.toString()).toBe(item);
+      };
+    const keyExtractor = (item: string, index: number) => {
+      expect(index.toString()).toBe(item);
+      return index.toString();
+    };
+    const onViewableItemsChanged: MasonryFlashListProps<string>["onViewableItemsChanged"] =
+      (info) => {
+        info.viewableItems.forEach((viewToken) => {
+          expect(viewToken.index?.toString()).toBe(viewToken.item);
+        });
+      };
+
+    const masonryFlashList = mountMasonryFlashList({
+      data,
+      renderItem,
+      getItemType,
+      overrideItemLayout,
+      keyExtractor,
+      onViewableItemsChanged,
+    });
+    jest.advanceTimersByTime(1000);
+    masonryFlashList.unmount();
+  });
+  it("internal list height should be derived from the parent and width from itself", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      testID: "MasonryProxyScrollView",
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(3);
+    masonryFlashList.findAll(View).forEach((view: any) => {
+      view.props?.onLayout?.({
+        nativeEvent: { layout: { width: 500, height: 500 } },
+      });
+    });
+    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
+      if (index !== 0) {
+        expect(list.instance.getRenderedSize().width).toBe(500);
+        expect(list.instance.getRenderedSize().height).toBe(900);
+      }
+    });
+    masonryFlashList.unmount();
+  });
+  it("can optimize item arrangement", () => {
+    const columnCount = 3;
+    const data = new Array(999).fill(null).map((_, index) => {
+      return "1";
+    });
+    const masonryFlashList = mountMasonryFlashList({
+      data,
+      optimizeItemArrangement: true,
+      numColumns: columnCount,
+      overrideItemLayout(layout, _, index, __, ___?) {
+        layout.size = ((index * 10) % 100) + 100 / ((index % columnCount) + 1);
+      },
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(4);
+
+    // I've verified that the following values are correct by observing the algorithm in action
+    // Captured values will help prevent regression in the future
+    expect(
+      Math.floor(
+        masonryFlashList
+          .findAll(ProgressiveListView)[1]
+          .instance.getContentDimension().height
+      )
+    ).toBe(35306);
+    expect(
+      Math.floor(
+        masonryFlashList
+          .findAll(ProgressiveListView)[2]
+          .instance.getContentDimension().height
+      )
+    ).toBe(35313);
+    expect(
+      Math.floor(
+        masonryFlashList
+          .findAll(ProgressiveListView)[3]
+          .instance.getContentDimension().height
+      )
+    ).toBe(35339);
+  });
+  it("applies horizontal content container padding to the list", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      numColumns: 4,
+      contentContainerStyle: { paddingHorizontal: 10 },
+    });
+    expect(masonryFlashList.findAll(ProgressiveListView).length).toBe(5);
+    masonryFlashList.findAll(ProgressiveListView).forEach((list, index) => {
+      if (index === 0) {
+        expect(list.instance.getRenderedSize().width).toBe(400);
+        expect(list.instance.getRenderedSize().height).toBe(900);
+      } else {
+        expect(list.instance.getRenderedSize().width).toBe(95);
+        expect(list.instance.getRenderedSize().height).toBe(900);
+      }
+    });
+    masonryFlashList.unmount();
+  });
+  it("divides columns equally if no getColumnFlex is passed", () => {
+    const masonryFlashList = mountMasonryFlashList({
+      numColumns: 4,
+    });
+    const progressiveListView =
+      masonryFlashList.find(ProgressiveListView)!.instance;
+    expect(progressiveListView.getLayout(0).width).toBe(100);
+    expect(progressiveListView.getLayout(1).width).toBe(100);
+    expect(progressiveListView.getLayout(2).width).toBe(100);
+    expect(progressiveListView.getLayout(3).width).toBe(100);
+  });
+});

package/src/__tests__/PlatformHelper.web.test.ts

@@ -0,0 +1,45 @@
+import {
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+} from "../native/config/PlatformHelper.web";
+
+describe("Platform Helper Web", () => {
+  it("can compute right transform for web", () => {
+    const transformStyle = getCellContainerPlatformStyles(false, {
+      x: 20,
+      y: 70,
+    });
+    const transformInvertedStyle = getCellContainerPlatformStyles(true, {
+      x: 30,
+      y: 30,
+    });
+    const transformHorizontalInvertedStyle = getCellContainerPlatformStyles(
+      true,
+      {
+        x: 30,
+        y: 30,
+        isHorizontal: true,
+      }
+    );
+    const expectedTransform = "translate(20px,70px)";
+    const expectedTransformInverted = "translate(30px,30px) scaleY(-1)";
+    const expectedTransformHorizontalInverted =
+      "translate(30px,30px) scaleX(-1)";
+
+    expect(transformStyle?.transform).toBe(expectedTransform);
+    expect(transformStyle?.WebkitTransform).toBe(expectedTransform);
+    expect(transformInvertedStyle?.transform).toBe(expectedTransformInverted);
+    expect(transformInvertedStyle?.WebkitTransform).toBe(
+      expectedTransformInverted
+    );
+    expect(transformHorizontalInvertedStyle?.transform).toBe(
+      expectedTransformHorizontalInverted
+    );
+    expect(transformHorizontalInvertedStyle?.WebkitTransform).toBe(
+      expectedTransformHorizontalInverted
+    );
+  });
+  it("can return an animator", () => {
+    expect(getItemAnimator()!["animateWillMount"]).toBeDefined();
+  });
+});

package/src/__tests__/ViewabilityHelper.test.ts

@@ -1,9 +1,8 @@
-import ViewabilityHelper from "../recyclerview/viewability/ViewabilityHelper";
-import { ErrorMessages } from "../errors/ErrorMessages";
-import {
-  RVDimension,
-  RVLayout,
-} from "../recyclerview/layout-managers/LayoutManager";
+import { Dimension, Layout } from "recyclerlistview";
+
+import CustomError from "../errors/CustomError";
+import ExceptionList from "../errors/ExceptionList";
+import ViewabilityHelper from "../viewability/ViewabilityHelper";
 
 describe("ViewabilityHelper", () => {
   const viewableIndicesChanged = jest.fn();
@@ -62,7 +61,7 @@ describe("ViewabilityHelper", () => {
     );
     viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
     const getLayout = (index: number) => {
-      return { x: index * 100, y: 0, height: 300, width: 100 } as RVLayout;
+      return { x: index * 100, y: 0, height: 300, width: 100 } as Layout;
     };
     updateViewableItems({ viewabilityHelper, horizontal: true, getLayout });
     expect(viewableIndicesChanged).toHaveBeenCalledWith(
@@ -161,9 +160,9 @@ describe("ViewabilityHelper", () => {
   it("reports items that only satisfy viewAreaCoveragePercentThreshold", () => {
     const getLayout = (index: number) => {
       if (index === 4) {
-        return { x: 0, y: index * 100, width: 100, height: 25 } as RVLayout;
+        return { x: 0, y: index * 100, width: 100, height: 25 } as Layout;
       }
-      return { x: 0, y: index * 100, height: 100, width: 300 } as RVLayout;
+      return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
     };
     const viewabilityHelper = new ViewabilityHelper(
       { viewAreaCoveragePercentThreshold: 25 },
@@ -247,7 +246,9 @@ describe("ViewabilityHelper", () => {
       viewableIndicesChanged
     );
     expect(() => updateViewableItems({ viewabilityHelper })).toThrow(
-      ErrorMessages.multipleViewabilityThresholdTypesNotSupported
+      new CustomError(
+        ExceptionList.multipleViewabilityThresholdTypesNotSupported
+      )
     );
   });
 
@@ -262,8 +263,8 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper: ViewabilityHelper;
     horizontal?: boolean;
     scrollOffset?: number;
-    listSize?: RVDimension;
-    getLayout?: (index: number) => RVLayout | undefined;
+    listSize?: Dimension;
+    getLayout?: (index: number) => Layout | undefined;
     runAllTimers?: boolean;
   }) => {
     viewabilityHelper.updateViewableItems(
@@ -272,7 +273,7 @@ describe("ViewabilityHelper", () => {
       listSize ?? { height: 300, width: 300 },
       getLayout ??
         ((index) => {
-          return { x: 0, y: index * 100, height: 100, width: 300 } as RVLayout;
+          return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
         })
     );
     if (runAllTimers ?? true) {

package/src/__tests__/helpers/mountFlashList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Text } from "react-native";
+import "@quilted/react-testing/matchers";
+import { render, Root } from "@quilted/react-testing";
+
+import FlashList from "../../FlashList";
+import { FlashListProps, ListRenderItem } from "../../FlashListProps";
+
+jest.mock("../../FlashList", () => {
+  const ActualFlashList = jest.requireActual("../../FlashList").default;
+  class MockFlashList extends ActualFlashList {
+    componentDidMount() {
+      super.componentDidMount();
+      this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
+        nativeEvent: { layout: { height: 900, width: 400 } },
+      });
+    }
+  }
+  return MockFlashList;
+});
+export type MockFlashListProps = Omit<
+  FlashListProps<string>,
+  "estimatedItemSize" | "data" | "renderItem"
+> & {
+  estimatedItemSize?: number;
+  data?: string[];
+  renderItem?: ListRenderItem<string>;
+  disableDefaultEstimatedItemSize?: boolean;
+};
+/**
+ * Helper to mount FlashList for testing.
+ */
+export const mountFlashList = (
+  props?: MockFlashListProps,
+  ref?: React.RefObject<FlashList<string>>
+) => {
+  const flashList = render(renderFlashList(props, ref)) as Omit<
+    Root<FlashListProps<string>>,
+    "instance"
+  > & {
+    instance: FlashList<string>;
+  };
+  return flashList;
+};
+
+export function renderFlashList(
+  props?: MockFlashListProps,
+  ref?: React.RefObject<FlashList<string>>
+) {
+  return (
+    <FlashList
+      {...props}
+      ref={ref}
+      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
+      estimatedItemSize={
+        props?.estimatedItemSize ??
+        (props?.disableDefaultEstimatedItemSize ? undefined : 200)
+      }
+      data={props?.data || ["One", "Two", "Three", "Four"]}
+    />
+  );
+}