@shopify/flash-list 1.6.4 → 1.7.0

package/ios/Sources/AutoLayoutView.swift

@@ -4,31 +4,35 @@ import UIKit
 
 /// Container for all RecyclerListView children. This will automatically remove all gaps and overlaps for GridLayouts with flexible spans.
 /// Note: This cannot work for masonry layouts i.e, pinterest like layout
-@objc class AutoLayoutView: UIView {
+@objc public class AutoLayoutView: UIView {
+    #if RCT_NEW_ARCH_ENABLED
+    @objc public var onBlankAreaEventHandler: ((CGFloat, CGFloat) -> Void)?
+    #endif
+    
     @objc(onBlankAreaEvent)
     var onBlankAreaEvent: RCTDirectEventBlock?
 
-    @objc func setHorizontal(_ horizontal: Bool) {
+    @objc public func setHorizontal(_ horizontal: Bool) {
         self.horizontal = horizontal
     }
 
-    @objc func setScrollOffset(_ scrollOffset: Int) {
+    @objc public func setScrollOffset(_ scrollOffset: Int) {
         self.scrollOffset = CGFloat(scrollOffset)
     }
 
-    @objc func setWindowSize(_ windowSize: Int) {
+    @objc public func setWindowSize(_ windowSize: Int) {
         self.windowSize = CGFloat(windowSize)
     }
 
-    @objc func setRenderAheadOffset(_ renderAheadOffset: Int) {
+    @objc public func setRenderAheadOffset(_ renderAheadOffset: Int) {
         self.renderAheadOffset = CGFloat(renderAheadOffset)
     }
 
-    @objc func setEnableInstrumentation(_ enableInstrumentation: Bool) {
+    @objc public func setEnableInstrumentation(_ enableInstrumentation: Bool) {
         self.enableInstrumentation = enableInstrumentation
     }
 
-    @objc func setDisableAutoLayout(_ disableAutoLayout: Bool) {
+    @objc public func setDisableAutoLayout(_ disableAutoLayout: Bool) {
         self.disableAutoLayout = disableAutoLayout
     }
 
@@ -46,7 +50,7 @@ import UIKit
     /// Tracks where first pixel is drawn in the visible window
     private var lastMinBound: CGFloat = 0
 
-    override func layoutSubviews() {
+    override public func layoutSubviews() {
         fixLayout()
         super.layoutSubviews()
 
@@ -68,13 +72,17 @@ import UIKit
             distanceFromWindowStart: distanceFromWindowStart,
             distanceFromWindowEnd: distanceFromWindowEnd
         )
-
+        
+        #if RCT_NEW_ARCH_ENABLED
+        onBlankAreaEventHandler?(blankOffsetStart, blankOffsetEnd)
+        #else
         onBlankAreaEvent?(
             [
                 "offsetStart": blankOffsetStart,
                 "offsetEnd": blankOffsetEnd,
             ]
         )
+        #endif
     }
 
     func getScrollView() -> UIScrollView? {
@@ -91,8 +99,8 @@ import UIKit
             !disableAutoLayout
         else { return }
         let cellContainers = subviews
-            .compactMap { subview -> CellContainer? in
-                if let cellContainer = subview as? CellContainer {
+            .compactMap { subview -> CellContainerComponentView? in
+                if let cellContainer = subview as? CellContainerComponentView {
                     return cellContainer
                 } else {
                     assertionFailure("CellRendererComponent outer view should always be CellContainer. Learn more here: https://shopify.github.io/flash-list/docs/usage#cellrenderercomponent.")
@@ -106,7 +114,7 @@ import UIKit
 
     /// Checks for overlaps or gaps between adjacent items and then applies a correction.
     /// Performance: RecyclerListView renders very small number of views and this is not going to trigger multiple layouts on the iOS side.
-    private func clearGaps(for cellContainers: [CellContainer]) {
+    private func clearGaps(for cellContainers: [CellContainerComponentView]) {
         var maxBound: CGFloat = 0
         var minBound: CGFloat = CGFloat(Int.max)
         var maxBoundNextCell: CGFloat = 0
@@ -125,26 +133,29 @@ import UIKit
 
 			// Only apply correction if the next cell is consecutive.
 			let isNextCellConsecutive = nextCell.index == cellContainer.index + 1
+			
+			let isCellVisible = isWithinBounds(
+				cellContainer,
+				scrollOffset: correctedScrollOffset,
+				renderAheadOffset: renderAheadOffset,
+				windowSize: windowSize,
+				isHorizontal: horizontal
+			)
+			let isNextCellVisible = isWithinBounds(
+				nextCell,
+				scrollOffset: correctedScrollOffset,
+				renderAheadOffset: renderAheadOffset,
+				windowSize: windowSize,
+				isHorizontal: horizontal
+			)
 
             guard
-                isWithinBounds(
-                    cellContainer,
-                    scrollOffset: correctedScrollOffset,
-                    renderAheadOffset: renderAheadOffset,
-                    windowSize: windowSize,
-                    isHorizontal: horizontal
-                )
+                isCellVisible || isNextCellVisible
             else {
                 updateLastMaxBoundOverall(currentCell: cellContainer, nextCell: nextCell)
                 return
             }
-            let isNextCellVisible = isWithinBounds(
-                nextCell,
-                scrollOffset: correctedScrollOffset,
-                renderAheadOffset: renderAheadOffset,
-                windowSize: windowSize,
-                isHorizontal: horizontal
-            )
+           
 
             if horizontal {
                 maxBound = max(maxBound, cellRight)
@@ -192,7 +203,7 @@ import UIKit
         lastMinBound = minBound
     }
 
-    private func updateLastMaxBoundOverall(currentCell: CellContainer, nextCell: CellContainer) {
+    private func updateLastMaxBoundOverall(currentCell: CellContainerComponentView, nextCell: CellContainerComponentView) {
         lastMaxBoundOverall = max(lastMaxBoundOverall, horizontal ? currentCell.frame.maxX : currentCell.frame.maxY, horizontal ? nextCell.frame.maxX : nextCell.frame.maxY)
     }
 
@@ -217,7 +228,7 @@ import UIKit
 
     /// It's important to avoid correcting views outside the render window. An item that isn't being recycled might still remain in the view tree. If views outside get considered then gaps between unused items will cause algorithm to fail.
     func isWithinBounds(
-        _ cellContainer: CellContainer,
+        _ cellContainer: CellContainerComponentView,
         scrollOffset: CGFloat,
         renderAheadOffset: CGFloat,
         windowSize: CGFloat,
@@ -271,6 +282,13 @@ import UIKit
     }
 
     private func footer() -> UIView? {
-        return superview?.subviews.first(where:{($0 as? CellContainer)?.index == -1})
+        // On the new arch, AutoLayoutView is wrapped with AutoLayoutViewComponentView, so we need to go up one more level
+        #if RCT_NEW_ARCH_ENABLED
+        let parentSubviews = superview?.superview?.subviews
+        #else
+        let parentSubviews = superview?.subviews
+        #endif
+
+        return parentSubviews?.first(where:{($0 as? CellContainerComponentView)?.index == -1})
     }
 }

package/ios/Sources/AutoLayoutViewComponentView.h

@@ -0,0 +1,16 @@
+#ifndef AutoLayoutViewComponentView_h
+#define AutoLayoutViewComponentView_h
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import <UIKit/UIKit.h>
+#import <React/RCTViewComponentView.h>
+
+@interface AutoLayoutViewComponentView : RCTViewComponentView
+
+@end
+
+
+#endif /* RCT_NEW_ARCH_ENABLED */
+
+#endif /* AutoLayoutViewComponentView_h */

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.0",
   "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.72.10",
+    "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/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__/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");