@shopify/flash-list 1.2.1 → 1.3.0

package/src/__tests__/helpers/mountMasonryFlashList.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Text } from "react-native";
+import "@quilted/react-testing/matchers";
+import { mount, Root } from "@quilted/react-testing";
+
+import { ListRenderItem } from "../../FlashListProps";
+import {
+  MasonryFlashList,
+  MasonryFlashListProps,
+  MasonryFlashListRef,
+} from "../../MasonryFlashList";
+
+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 MockMasonryFlashListProps = Omit<
+  MasonryFlashListProps<string>,
+  "estimatedItemSize" | "data" | "renderItem"
+> & {
+  estimatedItemSize?: number;
+  data?: string[];
+  renderItem?: ListRenderItem<string>;
+};
+
+/**
+ * Helper to mount MasonryFlashList for testing.
+ */
+export const mountMasonryFlashList = (
+  props?: MockMasonryFlashListProps,
+  ref?: React.RefObject<MasonryFlashListRef<string>>
+) => {
+  const flashList = mount(renderMasonryFlashList(props, ref)) as Omit<
+    Root<MasonryFlashListProps<string>>,
+    "instance"
+  > & {
+    instance: MasonryFlashListRef<string>;
+  };
+  return flashList;
+};
+
+export function renderMasonryFlashList(
+  props?: MockMasonryFlashListProps,
+  ref?: React.RefObject<MasonryFlashListRef<string>>
+) {
+  return (
+    <MasonryFlashList
+      {...props}
+      ref={ref}
+      numColumns={props?.numColumns ?? 2}
+      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
+      estimatedItemSize={props?.estimatedItemSize ?? 200}
+      data={props?.data || ["One", "Two", "Three", "Four"]}
+    />
+  );
+}

package/src/errors/ExceptionList.ts

@@ -19,5 +19,10 @@ const ExceptionList = {
       "You can set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold. Specifying both is not supported.",
     type: "MultipleViewabilityThresholdTypesException",
   },
+  overrideItemLayoutRequiredForMasonryOptimization: {
+    message:
+      "optimizeItemArrangement has been enabled on `MasonryFlashList` but overrideItemLayout is not set.",
+    type: "InvariantViolation",
+  },
 };
 export default ExceptionList;

package/src/index.ts

@@ -28,6 +28,13 @@ export {
   BlankAreaTrackerResult,
   BlankAreaTrackerConfig,
 } from "./benchmark/useBlankAreaTracker";
+export {
+  MasonryFlashList,
+  MasonryFlashListProps,
+  MasonryFlashListScrollEvent,
+  MasonryFlashListRef,
+  MasonryListItem,
+} from "./MasonryFlashList";
 export { JSFPSMonitor, JSFPSResult } from "./benchmark/JSFPSMonitor";
 export { autoScroll, Cancellable } from "./benchmark/AutoScrollHelper";
 export { default as ViewToken } from "./viewability/ViewToken";

package/src/native/auto-layout/AutoLayoutView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, ReactNode } from "react";
 import { LayoutChangeEvent } from "react-native";
 
 import AutoLayoutViewNativeComponent from "./AutoLayoutViewNativeComponent";
@@ -25,6 +25,7 @@ export interface BlankAreaEvent {
 }
 
 export interface AutoLayoutViewProps {
+  children?: ReactNode;
   onBlankAreaEvent?: BlankAreaEventHandler;
   onLayout?: (event: LayoutChangeEvent) => void;
   disableAutoLayout?: boolean;

package/src/native/auto-layout/AutoLayoutViewNativeComponentProps.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export interface OnBlankAreaEvent {
   nativeEvent: {
     offsetStart: number;
@@ -8,6 +10,7 @@ export interface OnBlankAreaEvent {
 type OnBlankAreaEventHandler = (event: OnBlankAreaEvent) => void;
 
 export interface AutoLayoutViewNativeComponentProps {
+  children?: ReactNode;
   onBlankAreaEvent: OnBlankAreaEventHandler;
   enableInstrumentation: boolean;
   disableAutoLayout?: boolean;

package/src/viewability/ViewabilityManager.ts

@@ -68,7 +68,8 @@ export default class ViewabilityManager<T> {
 
   public updateViewableItems = (newViewableIndices?: number[]) => {
     const listSize =
-      this.flashListRef.recyclerlistview_unsafe?.getRenderedSize();
+      this.flashListRef.recyclerlistview_unsafe?.getRenderedSize() ??
+      this.flashListRef.props.estimatedListSize;
     if (listSize === undefined || !this.shouldListenToVisibleIndices) {
       return;
     }