CellRendererComponent prop

Author: Marek Fořt

android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutView.kt

@@ -51,7 +51,14 @@ class AutoLayoutView(context: Context) : ReactViewGroup(context) {
      * Performance: Sort is needed. Given relatively low number of views in RecyclerListView render tree this should be a non issue.*/
     private fun fixLayout() {
         if (childCount > 1) {
-            val positionSortedViews = Array(childCount) { getChildAt(it) as CellContainer }
+            val positionSortedViews: Array<CellContainer> = Array(childCount) {
+                val child = getChildAt(it)
+                if (child is CellContainer) {
+                    child
+                } else {
+                    throw IllegalStateException("CellRendererComponent outer view should always be CellContainer.")
+                }
+            }
             positionSortedViews.sortBy { it.index }
             alShadow.offsetFromStart = if (alShadow.horizontal) left else top
             alShadow.clearGapsAndOverlaps(positionSortedViews)

documentation/docs/fundamentals/usage.md

@@ -89,6 +89,29 @@ estimatedItemSize: number;
 
 ---
 
+### `CellRendererComponent`
+
+Each cell is rendered using this element. Can be a React Component Class, or a render function. The root component should always be a `CellContainer` which is also the default component used. Ensure that the original `props` are passed to the returned `CellContainer`.
+
+When using with `react-native-reanimated`, you can wrap `CellContainer` in `Animated.createAnimatedComponent`:
+
+```ts
+const AnimatedCellContainer = Animated.createAnimatedComponent(CellContainer);
+return (
+  <FlashList
+    CellRendererComponent={(props) => {
+      return (
+          <AnimatedCellContainer {...props} style={...}>
+      );
+    }}
+  />
+);
+```
+
+```ts
+CellRendererComponent?: React.ComponentType<any> | undefined;
+```
+
 ### `ItemSeparatorComponent`
 
 Rendered in between each item, but not at the top or bottom. By default, `leadingItem` and `trailingItem` (if available) props are provided.
@@ -542,7 +565,6 @@ Param `animated` (`true` by default) defines whether the list should do an anima
 
 The following props from `FlatList` are currently not implemented:
 
-- [`CellRendererComponent`](https://reactnative.dev/docs/virtualizedlist#cellrenderercomponent)
 - [`columnWrapperStyle`](https://reactnative.dev/docs/flatlist#columnwrapperstyle)
 - [`debug`](https://reactnative.dev/docs/virtualizedlist#debug)
 - [`listKey`](https://reactnative.dev/docs/virtualizedlist#listkey)

fixture/ios/Podfile.lock

@@ -360,7 +360,7 @@ PODS:
     - React-jsi (= 0.68.1)
     - React-logger (= 0.68.1)
     - React-perflogger (= 0.68.1)
-  - ReactNativePerformanceListsProfiler (0.0.10):
+  - ReactNativePerformanceListsProfiler (0.0.11):
     - React-Core
   - RNFastImage (8.5.11):
     - React-Core
@@ -628,7 +628,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 9e344c840176b0af9c84d5019eb4fed8b3c105a1
   React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
   ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
-  ReactNativePerformanceListsProfiler: 3f9453c24a90c4f77db568d984c48f380968fa0d
+  ReactNativePerformanceListsProfiler: 7e61653bdfaae62dcec563198df85e2d443c217a
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
   RNFlashList: b9b9cad15a69ed4f853315eea89cd73dcc466567
   RNGestureHandler: 6e757e487a4834e7280e98e9bac66d2d9c575e9c

fixture/src/twitter/Twitter.tsx

@@ -6,8 +6,13 @@ import {
   ActivityIndicator,
   ViewabilityConfig,
 } from "react-native";
-import { BlankAreaEventHandler, FlashList } from "@shopify/flash-list";
+import {
+  BlankAreaEventHandler,
+  CellContainer,
+  FlashList,
+} from "@shopify/flash-list";
 import { FlashListPerformanceView } from "@shopify/react-native-performance-lists-profiler";
+import Animated from "react-native-reanimated";
 
 import { DebugContext } from "../Debug";
 

ios/Sources/AutoLayoutView.swift

@@ -77,10 +77,17 @@ import UIKit
         guard
             subviews.count > 1,
             // Fixing layout during animation can interfere with it.
-            layer.animationKeys()?.isEmpty == true
+            (layer.animationKeys()?.isEmpty ?? true) == true
         else { return }
         let cellContainers = subviews
-            .compactMap { $0 as? CellContainer }
+            .compactMap { subview -> CellContainer? in
+                if let cellContainer = subview as? CellContainer {
+                    return cellContainer
+                } else {
+                    assertionFailure("  ")
+                    return nil
+                }
+            }
             .sorted(by: { $0.index < $1.index })
         clearGaps(for: cellContainers)
     }

src/FlashList.tsx

@@ -19,7 +19,7 @@ import {
 import StickyContainer, { StickyContainerProps } from "recyclerlistview/sticky";
 
 import AutoLayoutView, { BlankAreaEventHandler } from "./AutoLayoutView";
-import ItemContainer from "./CellContainer";
+import CellContainer from "./CellContainer";
 import { PureComponentWrapper } from "./PureComponentWrapper";
 import GridLayoutProviderWithProps from "./GridLayoutProviderWithProps";
 import CustomError from "./errors/CustomError";
@@ -132,6 +132,14 @@ export interface FlashListProps<T> extends FlatListProps<T> {
     | ((info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void)
     | null
     | undefined;
+
+  /**
+   * Each cell is rendered using this element.
+   * Can be a React Component Class, or a render function.
+   * The root component should always be a `CellContainer` which is also the default component used.
+   * Ensure that the original `props` are passed to the returned `CellContainer`.
+   */
+  CellRendererComponent?: React.ComponentType<any> | undefined;
 }
 
 export interface FlashListState<T> {
@@ -535,8 +543,10 @@ class FlashList<T> extends React.PureComponent<
   };
 
   private itemContainer = (props: any, parentProps: any) => {
+    const CellRendererComponent =
+      this.props.CellRendererComponent ?? CellContainer;
     return (
-      <ItemContainer
+      <CellRendererComponent
         {...props}
         style={{
           ...props.style,
@@ -553,7 +563,7 @@ class FlashList<T> extends React.PureComponent<
           arg={parentProps.index}
           renderer={this.getCellContainerChild}
         />
-      </ItemContainer>
+      </CellRendererComponent>
     );
   };
 

src/index.ts

@@ -23,3 +23,4 @@ export {
 export { JSFPSMonitor, JSFPSResult } from "./benchmark/JSFPSMonitor";
 export { autoScroll, Cancellable } from "./benchmark/AutoScrollHelper";
 export { default as ViewToken } from "./ViewToken";
+export { default as CellContainer } from "./CellContainer";