@shopify/flash-list 1.6.4 → 1.7.1

package/ios/Sources/AutoLayoutViewComponentView.mm

@@ -0,0 +1,90 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "AutoLayoutViewComponentView.h"
+#import <React/RCTConversions.h>
+#import <React/RCTViewManager.h>
+
+#import <react/renderer/components/rnflashlist/ComponentDescriptors.h>
+#import <react/renderer/components/rnflashlist/EventEmitters.h>
+#import <react/renderer/components/rnflashlist/Props.h>
+#import <react/renderer/components/rnflashlist/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include(<RNFlashList/RNFlashList-Swift.h>)
+#import <RNFlashList/RNFlashList-Swift.h>
+#else
+#import "RNFlashList-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface AutoLayoutViewComponentView () <RCTAutoLayoutViewViewProtocol>
+@end
+
+@implementation AutoLayoutViewComponentView
+{
+    AutoLayoutView *_autoLayoutView;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const AutoLayoutViewProps>();
+    _props = defaultProps;
+    _autoLayoutView = [[AutoLayoutView alloc] initWithFrame:self.bounds];
+    self.contentView = _autoLayoutView;
+
+    __weak AutoLayoutViewComponentView* weakSelf = self;
+    _autoLayoutView.onBlankAreaEventHandler = ^(CGFloat start, CGFloat end) {
+      AutoLayoutViewComponentView *strongSelf = weakSelf;
+      if (strongSelf != nullptr && strongSelf->_eventEmitter != nullptr) {
+        std::dynamic_pointer_cast<const facebook::react::AutoLayoutViewEventEmitter>(strongSelf->_eventEmitter)
+          ->onBlankAreaEvent(facebook::react::AutoLayoutViewEventEmitter::OnBlankAreaEvent{
+            .offsetStart = (int) floor(start),
+            .offsetEnd = (int) floor(end),
+        });
+      }
+    };
+  }
+
+  return self;
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_autoLayoutView mountChildComponentView:childComponentView index:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_autoLayoutView unmountChildComponentView:childComponentView index:index];
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<AutoLayoutViewComponentDescriptor>();
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
+{
+    const auto &newProps = *std::static_pointer_cast<const AutoLayoutViewProps>(props);
+
+    [_autoLayoutView setHorizontal:newProps.horizontal];
+    [_autoLayoutView setScrollOffset:newProps.scrollOffset];
+    [_autoLayoutView setWindowSize:newProps.windowSize];
+    [_autoLayoutView setRenderAheadOffset:newProps.renderAheadOffset];
+    [_autoLayoutView setEnableInstrumentation:newProps.enableInstrumentation];
+    [_autoLayoutView setDisableAutoLayout:newProps.disableAutoLayout];
+
+    [super updateProps:props oldProps:oldProps];
+}
+@end
+
+Class<RCTComponentViewProtocol> AutoLayoutViewCls(void)
+{
+  return AutoLayoutViewComponentView.class;
+}
+
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/Sources/CellContainerComponentView.h

@@ -0,0 +1,18 @@
+#ifndef CellContainer_h
+#define CellContainer_h
+
+#import <UIKit/UIKit.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+
+@interface CellContainerComponentView : RCTViewComponentView
+#else
+@interface CellContainerComponentView : UIView
+#endif // RCT_NEW_ARCH_ENABLED
+
+@property int64_t index;
+
+@end
+
+#endif /* CellContainer_h */

package/ios/Sources/CellContainerComponentView.mm

@@ -0,0 +1,62 @@
+#import "CellContainerComponentView.h"
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTConversions.h>
+
+#import <react/renderer/components/rnflashlist/ComponentDescriptors.h>
+#import <react/renderer/components/rnflashlist/EventEmitters.h>
+#import <react/renderer/components/rnflashlist/Props.h>
+#import <react/renderer/components/rnflashlist/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include(<RNFlashList/RNFlashList-Swift.h>)
+#import <RNFlashList/RNFlashList-Swift.h>
+#else
+#import "RNFlashList-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@interface CellContainerComponentView () <RCTCellContainerViewProtocol>
+@end
+
+@implementation CellContainerComponentView
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+    if (self = [super initWithFrame:frame]) {
+        static const auto defaultProps = std::make_shared<const CellContainerProps>();
+        _props = defaultProps;
+
+        self.userInteractionEnabled = true;
+    }
+
+    return self;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+    return concreteComponentDescriptorProvider<CellContainerComponentDescriptor>();
+}
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
+{
+    const auto &newProps = *std::static_pointer_cast<const CellContainerProps>(props);
+
+    self.index = newProps.index;
+
+    [super updateProps:props oldProps:oldProps];
+}
+@end
+
+Class<RCTComponentViewProtocol> CellContainerCls(void)
+{
+    return CellContainerComponentView.class;
+}
+#else
+@implementation CellContainerComponentView
+@end
+#endif /* RCT_NEW_ARCH_ENABLED */

package/ios/Sources/CellContainerManager.swift

@@ -3,7 +3,7 @@ import Foundation
 @objc(CellContainerManager)
 class CellContainerManager: RCTViewManager {  
     override func view() -> UIView! {
-        return CellContainer()
+        return CellContainerComponentView()
     }
     
     override static func requiresMainQueueSetup() -> Bool {

package/ios/Sources/FlatListPro-Bridging-Header.h

@@ -4,5 +4,8 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTEventEmitter.h>
 #import <React/RCTViewManager.h>
+#import <React/RCTComponent.h>
+
+#import "CellContainerComponentView.h"
 
 #endif /* FlatListPro_Bridging_Header_h */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/flash-list",
-  "version": "1.6.4",
+  "version": "1.7.1",
   "keywords": [
     "react-native",
     "recyclerview",
@@ -28,27 +28,26 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "up": "bundle install && yarn fixture-up && yarn e2e-up && yarn build",
-    "fixture-web-up": "cd fixture/web-app && yarn && cd ../../",
-    "fixture-up": "cd fixture && yarn && cd ios && bundle exec pod install && cd ../../",
-    "e2e-up": "cd fixture/ios && brew tap wix/brew && brew install applesimutils && cd ../../",
-    "start": "cd fixture && react-native start",
+    "up": "bundle install && yarn fixture:rn:up && yarn e2e:up && yarn build",
+    "start": "cd fixture/react-native && react-native start",
     "test": "jest",
     "lint": "yarn eslint . --ext .ts,.tsx",
     "lint:fix": "yarn eslint . --ext .ts,.tsx --fix",
     "type-check": "yarn tsc --pretty --noEmit",
     "build": "tsc -b",
-    "e2e:build:android": "detox build -c android.emu.release",
-    "run-ios": "cd fixture && yarn react-native run-ios && yarn build --watch",
-    "ri": "yarn run-ios",
-    "run-android": "cd fixture && yarn react-native run-android && yarn build --watch",
-    "ra": "yarn run-android",
-    "run-e2e-ios": "cd fixture && yarn e2e:build:ios && yarn e2e:test:ios",
+    "fixture:rn:up": "cd fixture/react-native && yarn && cd ios && bundle exec pod install && cd ../../../",
+    "fixture:expo:up": "cd fixture/expo && yarn && cd ../../",
+    "fixture:rn:android": "cd fixture/react-native && yarn react-native run-android && yarn build --watch",
+    "fixture:rn:ios": "cd fixture/react-native && yarn react-native run-ios && yarn build --watch",
+    "ra": "yarn fixture:rn:android",
+    "ri": "yarn fixture:rn:ios",
+    "fixture:expo:start": "cd fixture/expo && yarn start",
+    "rw": "yarn fixture:expo:start",
+    "e2e:up": "cd fixture/react-native/ios && brew tap wix/brew && brew install applesimutils && cd ../../../",
+    "e2e:ios": "cd fixture/react-native && yarn e2e:build:ios && yarn e2e:test:ios",
     "rei": "yarn run-e2e-ios",
-    "run-e2e-android": "cd fixture && yarn e2e:build:android && yarn e2e:test:android",
+    "e2e:android": "cd fixture/react-native && yarn e2e:build:android && yarn e2e:test:android",
     "rea": "yarn run-e2e-android",
-    "run-web": "cd fixture/web-app && yarn web",
-    "rw": "yarn run-web",
     "predeploy:website": "sh ./build_website.sh",
     "deploy:website": "gh-pages -d website/_site"
   },
@@ -60,11 +59,11 @@
   "devDependencies": {
     "@babel/core": "^7.18.5",
     "@babel/runtime": "^7.18.3",
-    "@quilted/react-testing": "^0.5.14",
+    "@quilted/react-testing": "0.5.27",
     "@react-native-community/eslint-config": "^3.0.3",
     "@shopify/eslint-plugin": "^41.3.1",
     "@types/jest": "^29.5.10",
-    "@types/react-native": "0.72.2",
+    "@types/react": "^18.0.24",
     "babel-jest": "^28.1.1",
     "enhanced-resolve": "^5.9.3",
     "eslint": "8.18.0",
@@ -72,8 +71,9 @@
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "^0.71.1",
     "prettier": "^2.7.1",
-    "react": "17.0.2",
-    "react-native": "0.68.5",
+    "react": "18.2.0",
+    "react-native": "0.74.3",
+    "react-test-renderer": "18.2.0",
     "typescript": "^4.7.4"
   },
   "files": [
@@ -85,7 +85,12 @@
     "jestSetup.js"
   ],
   "dependencies": {
-    "recyclerlistview": "4.2.0",
-    "tslib": "2.4.0"
+    "recyclerlistview": "4.2.1",
+    "tslib": "2.6.3"
+  },
+  "codegenConfig": {
+    "name": "rnflashlist",
+    "type": "components",
+    "jsSrcsDir": "./src/specs"
   }
 }

package/src/FlashList.tsx

@@ -870,6 +870,13 @@ class FlashList<T> extends React.PureComponent<
   public recordInteraction = () => {
     this.viewabilityManager.recordInteraction();
   };
+
+  /**
+   * Retriggers viewability calculations. Useful to imperatively trigger viewability calculations.
+   */
+  public recomputeViewableItems = () => {
+    this.viewabilityManager.recomputeViewableItems();
+  };
 }
 
 export default FlashList;

package/src/MasonryFlashList.tsx

@@ -114,6 +114,9 @@ const MasonryFlashListComponent = React.forwardRef(
 
     const totalColumnFlex = useTotalColumnFlex(dataSet, props);
 
+    const propsRef = useRef(props);
+    propsRef.current = props;
+
     const onScrollRef = useRef<OnScrollCallback[]>([]);
     const emptyScrollEvent = useRef(getEmptyScrollEvent())
       .current as NativeSyntheticEvent<MasonryFlashListScrollEvent>;
@@ -135,7 +138,7 @@ const MasonryFlashListComponent = React.forwardRef(
           onScrollCallback?.(emptyScrollEvent);
         });
         if (!scrollEvent.nativeEvent.doNotPropagate) {
-          props.onScroll?.(scrollEvent);
+          propsRef.current.onScroll?.(scrollEvent);
         }
       }
     ).current;
@@ -151,7 +154,7 @@ const MasonryFlashListComponent = React.forwardRef(
         onScrollProxy?.(emptyScrollEvent);
         emptyScrollEvent.nativeEvent.doNotPropagate = false;
       }, 32);
-      props.onLoad?.(args);
+      propsRef.current.onLoad?.(args);
     }).current;
 
     const [parentFlashList, getFlashList] =

package/src/__tests__/FlashList.test.tsx

@@ -551,6 +551,121 @@ describe("FlashList", () => {
     });
   });
 
+  it("retrigers viewability events when recomputeViewableItems is called", () => {
+    const onViewableItemsChanged = jest.fn();
+    const flashList = mountFlashList({
+      estimatedItemSize: 300,
+      onViewableItemsChanged,
+      viewabilityConfig: {
+        itemVisiblePercentThreshold: 50,
+        minimumViewTime: 0,
+      },
+    });
+
+    // Initial viewable items
+    expect(onViewableItemsChanged).toHaveBeenCalledWith({
+      changed: [
+        {
+          index: 0,
+          isViewable: true,
+          item: "One",
+          key: "0",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 1,
+          isViewable: true,
+          item: "Two",
+          key: "1",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 2,
+          isViewable: true,
+          item: "Three",
+          key: "2",
+          timestamp: expect.any(Number),
+        },
+      ],
+      viewableItems: [
+        {
+          index: 0,
+          isViewable: true,
+          item: "One",
+          key: "0",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 1,
+          isViewable: true,
+          item: "Two",
+          key: "1",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 2,
+          isViewable: true,
+          item: "Three",
+          key: "2",
+          timestamp: expect.any(Number),
+        },
+      ],
+    });
+
+    onViewableItemsChanged.mockClear();
+
+    flashList.instance.recomputeViewableItems();
+
+    expect(onViewableItemsChanged).toHaveBeenCalledWith({
+      changed: [
+        {
+          index: 0,
+          isViewable: true,
+          item: "One",
+          key: "0",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 1,
+          isViewable: true,
+          item: "Two",
+          key: "1",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 2,
+          isViewable: true,
+          item: "Three",
+          key: "2",
+          timestamp: expect.any(Number),
+        },
+      ],
+      viewableItems: [
+        {
+          index: 0,
+          isViewable: true,
+          item: "One",
+          key: "0",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 1,
+          isViewable: true,
+          item: "Two",
+          key: "1",
+          timestamp: expect.any(Number),
+        },
+        {
+          index: 2,
+          isViewable: true,
+          item: "Three",
+          key: "2",
+          timestamp: expect.any(Number),
+        },
+      ],
+    });
+  });
+
   it("should not overlap header with sitcky index 0", () => {
     const HeaderComponent = () => {
       return <Text>Empty</Text>;

package/src/__tests__/helpers/mountFlashList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text } from "react-native";
 import "@quilted/react-testing/matchers";
-import { mount, Root } from "@quilted/react-testing";
+import { render, Root } from "@quilted/react-testing";
 
 import FlashList from "../../FlashList";
 import { FlashListProps, ListRenderItem } from "../../FlashListProps";
@@ -34,7 +34,7 @@ export const mountFlashList = (
   props?: MockFlashListProps,
   ref?: React.RefObject<FlashList<string>>
 ) => {
-  const flashList = mount(renderFlashList(props, ref)) as Omit<
+  const flashList = render(renderFlashList(props, ref)) as Omit<
     Root<FlashListProps<string>>,
     "instance"
   > & {

package/src/__tests__/helpers/mountMasonryFlashList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Text } from "react-native";
 import "@quilted/react-testing/matchers";
-import { mount, Root } from "@quilted/react-testing";
+import { render, Root } from "@quilted/react-testing";
 
 import { ListRenderItem } from "../../FlashListProps";
 import {
@@ -44,7 +44,7 @@ export const mountMasonryFlashList = (
   props?: MockMasonryFlashListProps,
   ref?: React.RefObject<MasonryFlashListRef<string>>
 ) => {
-  const flashList = mount(renderMasonryFlashList(props, ref)) as Omit<
+  const flashList = render(renderMasonryFlashList(props, ref)) as Omit<
     Root<MasonryFlashListProps<string>>,
     "instance"
   > & {

package/src/__tests__/useBlankAreaTracker.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { mount } from "@quilted/react-testing";
+import { render } from "@quilted/react-testing";
 
 import {
   BlankAreaTrackerConfig,
@@ -44,7 +44,7 @@ const mountBlankTrackingFlashList = (props?: BlankTrackingFlashListProps) => {
   const flashListRef: React.RefObject<FlashList<any>> = {
     current: null,
   };
-  const blankTrackingFlashList = mount(
+  const blankTrackingFlashList = render(
     <BlankTrackingFlashList {...props} instance={flashListRef} />
   );
   return {

package/src/specs/AutoLayoutNativeComponent.ts

@@ -0,0 +1,24 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+import type {
+  Int32,
+  Double,
+  DirectEventHandler,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+type BlankAreaEvent = Readonly<{
+  offsetStart: Int32;
+  offsetEnd: Int32;
+}>;
+
+interface NativeProps extends ViewProps {
+  horizontal?: boolean;
+  scrollOffset?: Double;
+  windowSize?: Double;
+  renderAheadOffset?: Double;
+  enableInstrumentation?: boolean;
+  disableAutoLayout?: boolean;
+  onBlankAreaEvent?: DirectEventHandler<BlankAreaEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>("AutoLayoutView");

package/src/specs/CellContainerNativeComponent.ts

@@ -0,0 +1,9 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+
+interface NativeProps extends ViewProps {
+  index?: Int32;
+}
+
+export default codegenNativeComponent<NativeProps>("CellContainer");

package/src/viewability/ViewabilityHelper.ts

@@ -118,6 +118,10 @@ class ViewabilityHelper {
     }
   }
 
+  public clearLastReportedViewableIndices() {
+    this.lastReportedViewableIndices = [];
+  }
+
   private isItemViewable(
     index: number,
     horizontal: boolean,

package/src/viewability/ViewabilityManager.ts

@@ -88,6 +88,14 @@ export default class ViewabilityManager<T> {
     });
   };
 
+  public recomputeViewableItems = () => {
+    this.viewabilityHelpers.forEach((viewabilityHelper) =>
+      viewabilityHelper.clearLastReportedViewableIndices()
+    );
+
+    this.updateViewableItems();
+  };
+
   /**
    * Creates a new `ViewabilityHelper` instance with `onViewableItemsChanged` callback and `ViewabilityConfig`
    * @returns `ViewabilityHelper` instance