@react-native-ohos/flash-list 1.8.3-rc.1

package/src/FlashList.tsx

@@ -0,0 +1,955 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { JSX } from "react";
+import {
+  View,
+  RefreshControl,
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+  StyleSheet,
+  NativeScrollEvent,
+} from "react-native";
+import {
+  BaseItemAnimator,
+  DataProvider,
+  Dimension,
+  Layout,
+  ProgressiveListView,
+  RecyclerListView,
+  RecyclerListViewProps,
+  WindowCorrectionConfig,
+} from "recyclerlistview";
+import StickyContainer, { StickyContainerProps } from "recyclerlistview/sticky";
+
+import AutoLayoutView from "./native/auto-layout/AutoLayoutView";
+import CellContainer from "./native/cell-container/CellContainer";
+import { PureComponentWrapper } from "./PureComponentWrapper";
+import GridLayoutProviderWithProps from "./GridLayoutProviderWithProps";
+import CustomError from "./errors/CustomError";
+import ExceptionList from "./errors/ExceptionList";
+import WarningList from "./errors/Warnings";
+import ViewabilityManager from "./viewability/ViewabilityManager";
+import {
+  FlashListProps,
+  RenderTarget,
+  RenderTargetOptions,
+} from "./FlashListProps";
+import {
+  getCellContainerPlatformStyles,
+  getFooterContainer,
+  getItemAnimator,
+  PlatformConfig,
+} from "./native/config/PlatformHelper";
+import {
+  ContentStyleExplicit,
+  getContentContainerPadding,
+  hasUnsupportedKeysInContentContainerStyle,
+  updateContentStyle,
+} from "./utils/ContentContainerUtils";
+
+interface StickyProps extends StickyContainerProps {
+  children: any;
+}
+const StickyHeaderContainer =
+  StickyContainer as React.ComponentClass<StickyProps>;
+
+export interface FlashListState<T> {
+  dataProvider: DataProvider;
+  numColumns: number;
+  layoutProvider: GridLayoutProviderWithProps<T>;
+  data?: ReadonlyArray<T> | null;
+  extraData?: ExtraData<unknown>;
+  renderItem?: FlashListProps<T>["renderItem"];
+}
+
+interface ExtraData<T> {
+  value?: T;
+}
+
+class FlashList<T> extends React.PureComponent<
+  FlashListProps<T>,
+  FlashListState<T>
+> {
+  private rlvRef?: RecyclerListView<RecyclerListViewProps, any>;
+  private stickyContentContainerRef?: PureComponentWrapper;
+  private listFixedDimensionSize = 0;
+  private transformStyle = PlatformConfig.invertedTransformStyle;
+  private transformStyleHorizontal =
+    PlatformConfig.invertedTransformStyleHorizontal;
+
+  private distanceFromWindow = 0;
+  private contentStyle: ContentStyleExplicit = {
+    paddingBottom: 0,
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+  };
+
+  private loadStartTime = 0;
+  private isListLoaded = false;
+  private windowCorrectionConfig: WindowCorrectionConfig = {
+    value: {
+      windowShift: 0,
+      startCorrection: 0,
+      endCorrection: 0,
+    },
+    applyToItemScroll: true,
+    applyToInitialOffset: true,
+  };
+
+  private postLoadTimeoutId?: ReturnType<typeof setTimeout>;
+  private itemSizeWarningTimeoutId?: ReturnType<typeof setTimeout>;
+  private renderedSizeWarningTimeoutId?: ReturnType<typeof setTimeout>;
+
+  private isEmptyList = false;
+  private viewabilityManager: ViewabilityManager<T>;
+
+  private itemAnimator?: BaseItemAnimator;
+
+  static defaultProps = {
+    data: [],
+    numColumns: 1,
+  };
+
+  constructor(props: FlashListProps<T>) {
+    super(props);
+    this.loadStartTime = Date.now();
+    this.validateProps();
+    if (props.estimatedListSize) {
+      if (props.horizontal) {
+        this.listFixedDimensionSize = props.estimatedListSize.height;
+      } else {
+        this.listFixedDimensionSize = props.estimatedListSize.width;
+      }
+    }
+    this.distanceFromWindow =
+      props.estimatedFirstItemOffset ?? ((props.ListHeaderComponent && 1) || 0);
+    // eslint-disable-next-line react/state-in-constructor
+    this.state = FlashList.getInitialMutableState(this);
+    this.viewabilityManager = new ViewabilityManager(this);
+    this.itemAnimator = getItemAnimator();
+  }
+
+  private validateProps() {
+    if (this.props.onRefresh && typeof this.props.refreshing !== "boolean") {
+      throw new CustomError(ExceptionList.refreshBooleanMissing);
+    }
+    if (
+      Number(this.props.stickyHeaderIndices?.length) > 0 &&
+      this.props.horizontal
+    ) {
+      throw new CustomError(ExceptionList.stickyWhileHorizontalNotSupported);
+    }
+    if (Number(this.props.numColumns) > 1 && this.props.horizontal) {
+      throw new CustomError(ExceptionList.columnsWhileHorizontalNotSupported);
+    }
+
+    // `createAnimatedComponent` always passes a blank style object. To avoid warning while using AnimatedFlashList we've modified the check
+    // `style` prop can be an array. So we need to validate every object in array. Check: https://github.com/Shopify/flash-list/issues/651
+    if (
+      __DEV__ &&
+      Object.keys(StyleSheet.flatten(this.props.style ?? {})).length > 0
+    ) {
+      console.warn(WarningList.styleUnsupported);
+    }
+    if (
+      hasUnsupportedKeysInContentContainerStyle(
+        this.props.contentContainerStyle
+      )
+    ) {
+      console.warn(WarningList.styleContentContainerUnsupported);
+    }
+  }
+
+  // Some of the state variables need to update when props change
+  static getDerivedStateFromProps<T>(
+    nextProps: Readonly<FlashListProps<T>>,
+    prevState: FlashListState<T>
+  ): FlashListState<T> {
+    const newState = { ...prevState };
+    if (prevState.numColumns !== nextProps.numColumns) {
+      newState.numColumns = nextProps.numColumns || 1;
+      newState.layoutProvider = FlashList.getLayoutProvider<T>(
+        newState.numColumns,
+        nextProps
+      );
+    } else if (prevState.layoutProvider.updateProps(nextProps).hasExpired) {
+      newState.layoutProvider = FlashList.getLayoutProvider<T>(
+        newState.numColumns,
+        nextProps
+      );
+    }
+
+    // RLV retries to reposition the first visible item on layout provider change.
+    // It's not required in our case so we're disabling it
+    newState.layoutProvider.shouldRefreshWithAnchoring = Boolean(
+      !prevState.layoutProvider?.hasExpired
+    );
+
+    if (nextProps.data !== prevState.data) {
+      newState.data = nextProps.data;
+      newState.dataProvider = prevState.dataProvider.cloneWithRows(
+        nextProps.data as any[]
+      );
+      if (nextProps.renderItem !== prevState.renderItem) {
+        newState.extraData = { ...prevState.extraData };
+      }
+    }
+    if (nextProps.extraData !== prevState.extraData?.value) {
+      newState.extraData = { value: nextProps.extraData };
+    }
+    newState.renderItem = nextProps.renderItem;
+    return newState;
+  }
+
+  private static getInitialMutableState<T>(
+    flashList: FlashList<T>
+  ): FlashListState<T> {
+    let getStableId: ((index: number) => string) | undefined;
+    if (
+      flashList.props.keyExtractor !== null &&
+      flashList.props.keyExtractor !== undefined
+    ) {
+      getStableId = (index) =>
+        // We assume `keyExtractor` function will never change from being `null | undefined` to defined and vice versa.
+        // Similarly, data should never be `null | undefined` when `getStableId` is called.
+        flashList.props.keyExtractor!(
+          flashList.props.data![index],
+          index
+        ).toString();
+    }
+    return {
+      data: null,
+      layoutProvider: null!!,
+      dataProvider: new DataProvider((r1, r2) => {
+        return r1 !== r2;
+      }, getStableId),
+      numColumns: 0,
+    };
+  }
+
+  // Using only grid layout provider as it can also act as a listview, sizeProvider is a function to support future overrides
+  private static getLayoutProvider<T>(
+    numColumns: number,
+    flashListProps: FlashListProps<T>
+  ) {
+    return new GridLayoutProviderWithProps<T>(
+      // max span or, total columns
+      numColumns,
+      (index, props) => {
+        // type of the item for given index
+        const type = props.getItemType?.(
+          props.data!![index],
+          index,
+          props.extraData
+        );
+        return type || 0;
+      },
+      (index, props, mutableLayout) => {
+        // span of the item at given index, item can choose to span more than one column
+        props.overrideItemLayout?.(
+          mutableLayout,
+          props.data!![index],
+          index,
+          numColumns,
+          props.extraData
+        );
+        return mutableLayout?.span ?? 1;
+      },
+      (index, props, mutableLayout) => {
+        // estimated size of the item an given index
+        props.overrideItemLayout?.(
+          mutableLayout,
+          props.data!![index],
+          index,
+          numColumns,
+          props.extraData
+        );
+        return mutableLayout?.size;
+      },
+      flashListProps
+    );
+  }
+
+  private onEndReached = () => {
+    this.props.onEndReached?.();
+  };
+
+  private getRefreshControl = () => {
+    if (this.props.onRefresh) {
+      return (
+        <RefreshControl
+          refreshing={Boolean(this.props.refreshing)}
+          progressViewOffset={this.props.progressViewOffset}
+          onRefresh={this.props.onRefresh}
+        />
+      );
+    }
+  };
+
+  componentDidMount() {
+    if (this.props.data?.length === 0) {
+      this.raiseOnLoadEventIfNeeded();
+    }
+  }
+
+  componentWillUnmount() {
+    this.viewabilityManager.dispose();
+    this.clearPostLoadTimeout();
+    this.clearRenderSizeWarningTimeout();
+    if (this.itemSizeWarningTimeoutId !== undefined) {
+      clearTimeout(this.itemSizeWarningTimeoutId);
+    }
+  }
+
+  render() {
+    this.isEmptyList = this.state.dataProvider.getSize() === 0;
+    updateContentStyle(this.contentStyle, this.props.contentContainerStyle);
+
+    const {
+      drawDistance,
+      removeClippedSubviews,
+      stickyHeaderIndices,
+      horizontal,
+      onEndReachedThreshold,
+      estimatedListSize,
+      initialScrollIndex,
+      style,
+      contentContainerStyle,
+      renderScrollComponent,
+      ...restProps
+    } = this.props;
+
+    // RecyclerListView simply ignores if initialScrollIndex is set to 0 because it doesn't understand headers
+    // Using initialOffset to force RLV to scroll to the right place
+    const initialOffset =
+      (this.isInitialScrollIndexInFirstRow() && this.distanceFromWindow) ||
+      undefined;
+    const finalDrawDistance =
+      drawDistance === undefined
+        ? PlatformConfig.defaultDrawDistance
+        : drawDistance;
+
+    return (
+      <StickyHeaderContainer
+        overrideRowRenderer={this.stickyOverrideRowRenderer}
+        applyWindowCorrection={this.applyWindowCorrection}
+        stickyHeaderIndices={stickyHeaderIndices}
+        style={
+          this.props.horizontal
+            ? { ...this.getTransform() }
+            : { flex: 1, overflow: "hidden", ...this.getTransform() }
+        }
+      >
+        <ProgressiveListView
+          {...restProps}
+          ref={this.recyclerRef}
+          layoutProvider={this.state.layoutProvider}
+          dataProvider={this.state.dataProvider}
+          rowRenderer={this.emptyRowRenderer}
+          canChangeSize
+          isHorizontal={Boolean(horizontal)}
+          scrollViewProps={{
+            onScrollBeginDrag: this.onScrollBeginDrag,
+            onLayout: this.handleSizeChange,
+            refreshControl:
+              this.props.refreshControl || this.getRefreshControl(),
+
+            // Min values are being used to suppress RLV's bounded exception
+            style: { minHeight: 1, minWidth: 1 },
+            contentContainerStyle: {
+              backgroundColor: this.contentStyle.backgroundColor,
+
+              // Required to handle a scrollview bug. Check: https://github.com/Shopify/flash-list/pull/187
+              minHeight: 1,
+              minWidth: 1,
+
+              ...getContentContainerPadding(this.contentStyle, horizontal),
+            },
+            ...this.props.overrideProps,
+          }}
+          forceNonDeterministicRendering
+          renderItemContainer={this.itemContainer}
+          renderContentContainer={this.container}
+          onEndReached={this.onEndReached}
+          onEndReachedThresholdRelative={onEndReachedThreshold || undefined}
+          extendedState={this.state.extraData}
+          layoutSize={estimatedListSize}
+          maxRenderAhead={3 * finalDrawDistance}
+          finalRenderAheadOffset={finalDrawDistance}
+          renderAheadStep={finalDrawDistance}
+          initialRenderIndex={
+            (!this.isInitialScrollIndexInFirstRow() && initialScrollIndex) ||
+            undefined
+          }
+          initialOffset={initialOffset}
+          onItemLayout={this.onItemLayout}
+          onScroll={this.onScroll}
+          onVisibleIndicesChanged={
+            this.viewabilityManager.shouldListenToVisibleIndices
+              ? this.viewabilityManager.onVisibleIndicesChanged
+              : undefined
+          }
+          windowCorrectionConfig={this.getUpdatedWindowCorrectionConfig()}
+          itemAnimator={this.itemAnimator}
+          suppressBoundedSizeException
+          externalScrollView={
+            renderScrollComponent as RecyclerListViewProps["externalScrollView"]
+          }
+        />
+      </StickyHeaderContainer>
+    );
+  }
+
+  private onScrollBeginDrag = (
+    event: NativeSyntheticEvent<NativeScrollEvent>
+  ) => {
+    this.recordInteraction();
+    this.props.onScrollBeginDrag?.(event);
+  };
+
+  private onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    this.recordInteraction();
+    this.viewabilityManager.updateViewableItems();
+    this.props.onScroll?.(event);
+  };
+
+  private getUpdatedWindowCorrectionConfig() {
+    // If the initial scroll index is in the first row then we're forcing RLV to use initialOffset and thus we need to disable window correction
+    // This isn't clean but it's the only way to get RLV to scroll to the right place
+    // TODO: Remove this when RLV fixes this. Current implementation will also fail if column span is overridden in the first row.
+    if (this.isInitialScrollIndexInFirstRow()) {
+      this.windowCorrectionConfig.applyToInitialOffset = false;
+    } else {
+      this.windowCorrectionConfig.applyToInitialOffset = true;
+    }
+    this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;
+    return this.windowCorrectionConfig;
+  }
+
+  private isInitialScrollIndexInFirstRow() {
+    return (
+      (this.props.initialScrollIndex ?? this.state.numColumns) <
+      this.state.numColumns
+    );
+  }
+
+  private validateListSize(event: LayoutChangeEvent) {
+    const { height, width } = event.nativeEvent.layout;
+    this.clearRenderSizeWarningTimeout();
+    if (Math.floor(height) <= 1 || Math.floor(width) <= 1) {
+      this.renderedSizeWarningTimeoutId = setTimeout(() => {
+        console.warn(WarningList.unusableRenderedSize);
+      }, 1000);
+    }
+  }
+
+  private handleSizeChange = (event: LayoutChangeEvent) => {
+    this.validateListSize(event);
+    const newSize = this.props.horizontal
+      ? event.nativeEvent.layout.height
+      : event.nativeEvent.layout.width;
+    const oldSize = this.listFixedDimensionSize;
+    this.listFixedDimensionSize = newSize;
+
+    // >0 check is to avoid rerender on mount where it would be redundant
+    if (oldSize > 0 && oldSize !== newSize) {
+      this.rlvRef?.forceRerender();
+    }
+    if (this.props.onLayout) {
+      this.props.onLayout(event);
+    }
+  };
+
+  private container = (props: object, children: React.ReactNode[]) => {
+    this.clearPostLoadTimeout();
+    return (
+      <>
+        <PureComponentWrapper
+          enabled={this.isListLoaded || children.length > 0 || this.isEmptyList}
+          contentStyle={this.props.contentContainerStyle}
+          horizontal={this.props.horizontal}
+          header={this.props.ListHeaderComponent}
+          extraData={this.state.extraData}
+          headerStyle={this.props.ListHeaderComponentStyle}
+          inverted={this.props.inverted}
+          renderer={this.header}
+        />
+        <AutoLayoutView
+          {...props}
+          onBlankAreaEvent={this.props.onBlankArea}
+          onLayout={this.updateDistanceFromWindow}
+          disableAutoLayout={this.props.disableAutoLayout}
+        >
+          {children}
+        </AutoLayoutView>
+        {this.isEmptyList
+          ? this.getValidComponent(this.props.ListEmptyComponent)
+          : null}
+        <PureComponentWrapper
+          enabled={this.isListLoaded || children.length > 0 || this.isEmptyList}
+          contentStyle={this.props.contentContainerStyle}
+          horizontal={this.props.horizontal}
+          header={this.props.ListFooterComponent}
+          extraData={this.state.extraData}
+          headerStyle={this.props.ListFooterComponentStyle}
+          inverted={this.props.inverted}
+          renderer={this.footer}
+        />
+        {this.getComponentForHeightMeasurement()}
+      </>
+    );
+  };
+
+  private itemContainer = (props: any, parentProps: any) => {
+    const CellRendererComponent =
+      this.props.CellRendererComponent ?? CellContainer;
+    return (
+      <CellRendererComponent
+        {...props}
+        style={{
+          ...props.style,
+          flexDirection: this.props.horizontal ? "row" : "column",
+          alignItems: "stretch",
+          ...this.getTransform(),
+          ...getCellContainerPlatformStyles(this.props.inverted!!, parentProps),
+        }}
+        index={parentProps.index}
+      >
+        <PureComponentWrapper
+          extendedState={parentProps.extendedState}
+          internalSnapshot={parentProps.internalSnapshot}
+          data={parentProps.data}
+          arg={parentProps.index}
+          renderer={this.getCellContainerChild}
+        />
+      </CellRendererComponent>
+    );
+  };
+
+  private updateDistanceFromWindow = (event: LayoutChangeEvent) => {
+    const newDistanceFromWindow = this.props.horizontal
+      ? event.nativeEvent.layout.x
+      : event.nativeEvent.layout.y;
+
+    if (this.distanceFromWindow !== newDistanceFromWindow) {
+      this.distanceFromWindow = newDistanceFromWindow;
+      this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;
+      this.viewabilityManager.updateViewableItems();
+    }
+  };
+
+  private getTransform() {
+    const transformStyle = this.props.horizontal
+      ? this.transformStyleHorizontal
+      : this.transformStyle;
+    return (this.props.inverted && transformStyle) || undefined;
+  }
+
+  private separator = (index: number) => {
+    // Make sure we have data and don't read out of bounds
+    if (
+      this.props.data === null ||
+      this.props.data === undefined ||
+      index + 1 >= this.props.data.length
+    ) {
+      return null;
+    }
+
+    const leadingItem = this.props.data[index];
+    const trailingItem = this.props.data[index + 1];
+
+    const props = {
+      leadingItem,
+      trailingItem,
+      // TODO: Missing sections as we don't have this feature implemented yet. Implement section, leadingSection and trailingSection.
+      // https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/Lists/VirtualizedSectionList.js#L285-L294
+    };
+    const Separator = this.props.ItemSeparatorComponent;
+    return Separator && <Separator {...props} />;
+  };
+
+  private header = () => {
+    return (
+      <>
+        <View
+          style={{
+            paddingTop: this.contentStyle.paddingTop,
+            paddingLeft: this.contentStyle.paddingLeft,
+          }}
+        />
+
+        <View
+          style={[this.props.ListHeaderComponentStyle, this.getTransform()]}
+        >
+          {this.getValidComponent(this.props.ListHeaderComponent)}
+        </View>
+      </>
+    );
+  };
+
+  private footer = () => {
+    /** The web version of CellContainer uses a div directly which doesn't compose styles the way a View does.
+     * We will skip using CellContainer on web to avoid this issue. `getFooterContainer` on web will
+     * return a View. */
+    const FooterContainer = getFooterContainer() ?? CellContainer;
+    return (
+      <>
+        <FooterContainer
+          index={-1}
+          style={[this.props.ListFooterComponentStyle, this.getTransform()]}
+        >
+          {this.getValidComponent(this.props.ListFooterComponent)}
+        </FooterContainer>
+        <View
+          style={{
+            paddingBottom: this.contentStyle.paddingBottom,
+            paddingRight: this.contentStyle.paddingRight,
+          }}
+        />
+      </>
+    );
+  };
+
+  private getComponentForHeightMeasurement = () => {
+    return this.props.horizontal &&
+      !this.props.disableHorizontalListHeightMeasurement &&
+      !this.isListLoaded &&
+      this.state.dataProvider.getSize() > 0 ? (
+      <View style={{ opacity: 0 }} pointerEvents="none">
+        {this.rowRendererWithIndex(
+          Math.min(this.state.dataProvider.getSize() - 1, 1),
+          RenderTargetOptions.Measurement
+        )}
+      </View>
+    ) : null;
+  };
+
+  private getValidComponent(
+    component: React.ComponentType | React.ReactElement | null | undefined
+  ) {
+    const PassedComponent = component;
+    return (
+      (React.isValidElement(PassedComponent) && PassedComponent) ||
+      (PassedComponent && <PassedComponent />) ||
+      null
+    );
+  }
+
+  private applyWindowCorrection = (
+    _: any,
+    __: any,
+    correctionObject: { windowShift: number }
+  ) => {
+    correctionObject.windowShift = -this.distanceFromWindow;
+    this.stickyContentContainerRef?.setEnabled(this.isStickyEnabled);
+  };
+
+  private rowRendererSticky = (index: number) => {
+    return this.rowRendererWithIndex(index, RenderTargetOptions.StickyHeader);
+  };
+
+  private rowRendererWithIndex = (index: number, target: RenderTarget) => {
+    // known issue: expected to pass separators which isn't available in RLV
+    return this.props.renderItem?.({
+      item: this.props.data![index],
+      index,
+      target,
+      extraData: this.state.extraData?.value,
+    }) as JSX.Element;
+  };
+
+  /**
+   * This will prevent render item calls unless data changes.
+   * Output of this method is received as children object so returning null here is no issue as long as we handle it inside our child container.
+   * @module getCellContainerChild acts as the new rowRenderer and is called directly from our child container.
+   */
+  private emptyRowRenderer = () => {
+    return null;
+  };
+
+  private getCellContainerChild = (index: number) => {
+    return (
+      <>
+        {this.props.inverted ? this.separator(index) : null}
+        <View
+          style={{
+            flexDirection:
+              this.props.horizontal || this.props.numColumns === 1
+                ? "column"
+                : "row",
+          }}
+        >
+          {this.rowRendererWithIndex(index, RenderTargetOptions.Cell)}
+        </View>
+        {this.props.inverted ? null : this.separator(index)}
+      </>
+    );
+  };
+
+  private recyclerRef = (ref: any) => {
+    this.rlvRef = ref;
+  };
+
+  private stickyContentRef = (ref: any) => {
+    this.stickyContentContainerRef = ref;
+  };
+
+  private stickyOverrideRowRenderer = (
+    _: any,
+    rowData: any,
+    index: number,
+    ___: any
+  ) => {
+    return (
+      <PureComponentWrapper
+        ref={this.stickyContentRef}
+        enabled={this.isStickyEnabled}
+        // We're passing rowData to ensure that sticky headers are updated when data changes
+        rowData={rowData}
+        arg={index}
+        renderer={this.rowRendererSticky}
+      />
+    );
+  };
+
+  private get isStickyEnabled() {
+    const currentOffset = this.rlvRef?.getCurrentScrollOffset() || 0;
+    return currentOffset >= this.distanceFromWindow;
+  }
+
+  private onItemLayout = (index: number) => {
+    // Informing the layout provider about change to an item's layout. It already knows the dimensions so there's not need to pass them.
+    this.state.layoutProvider.reportItemLayout(index);
+    this.raiseOnLoadEventIfNeeded();
+  };
+
+  private raiseOnLoadEventIfNeeded = () => {
+    if (!this.isListLoaded) {
+      this.isListLoaded = true;
+      this.props.onLoad?.({
+        elapsedTimeInMs: Date.now() - this.loadStartTime,
+      });
+      this.runAfterOnLoad();
+    }
+  };
+
+  private runAfterOnLoad = () => {
+    if (this.props.estimatedItemSize === undefined) {
+      this.itemSizeWarningTimeoutId = setTimeout(() => {
+        const averageItemSize = Math.floor(
+          this.state.layoutProvider.averageItemSize
+        );
+        console.warn(
+          WarningList.estimatedItemSizeMissingWarning.replace(
+            "@size",
+            averageItemSize.toString()
+          )
+        );
+      }, 1000);
+    }
+    this.postLoadTimeoutId = setTimeout(() => {
+      // This force update is required to remove dummy element rendered to measure horizontal list height when  the list doesn't update on its own.
+      // In most cases this timeout will never be triggered because list usually updates atleast once and this timeout is cleared on update.
+      if (this.props.horizontal) {
+        this.forceUpdate();
+      }
+    }, 500);
+  };
+
+  private clearPostLoadTimeout = () => {
+    if (this.postLoadTimeoutId !== undefined) {
+      clearTimeout(this.postLoadTimeoutId);
+      this.postLoadTimeoutId = undefined;
+    }
+  };
+
+  private clearRenderSizeWarningTimeout = () => {
+    if (this.renderedSizeWarningTimeoutId !== undefined) {
+      clearTimeout(this.renderedSizeWarningTimeoutId);
+      this.renderedSizeWarningTimeoutId = undefined;
+    }
+  };
+
+  /**
+   * Disables recycling for the next frame so that layout animations run well.
+   * Warning: Avoid this when making large changes to the data as the list might draw too much to run animations. Single item insertions/deletions
+   * should be good. With recycling paused the list cannot do much optimization.
+   * The next render will run as normal and reuse items.
+   */
+  public prepareForLayoutAnimationRender(): void {
+    if (
+      this.props.keyExtractor === null ||
+      this.props.keyExtractor === undefined
+    ) {
+      console.warn(WarningList.missingKeyExtractor);
+    } else {
+      this.rlvRef?.prepareForLayoutAnimationRender();
+    }
+  }
+
+  public scrollToEnd(params?: { animated?: boolean | null | undefined }) {
+    this.rlvRef?.scrollToEnd(Boolean(params?.animated));
+  }
+  
+  public scrollToIndex(params: {
+    animated?: boolean | null | undefined;
+    index: number;
+    viewOffset?: number | undefined;
+    viewPosition?: number | undefined;
+  }) {
+    const layout = this.rlvRef?.getLayout(params.index);
+    const listSize = this.rlvRef?.getRenderedSize();
+
+    if (layout && listSize) {
+      const itemOffset = this.props.horizontal ? layout.x : layout.y;
+      const fixedDimension = this.props.horizontal
+        ? listSize.width
+        : listSize.height;
+      const itemSize = this.props.horizontal ? layout.width : layout.height;
+      const scrollOffset =
+        Math.max(
+          0,
+          itemOffset - (params.viewPosition ?? 0) * (fixedDimension - itemSize)
+        ) - (params.viewOffset ?? 0);
+      this.rlvRef?.scrollToOffset(
+        scrollOffset,
+        scrollOffset,
+        Boolean(params.animated),
+        true
+      );
+    }
+  }
+
+  public scrollToItem(params: {
+    animated?: boolean | null | undefined;
+    item: any;
+    viewPosition?: number | undefined;
+    viewOffset?: number | undefined;
+  }) {
+    const index = this.props.data?.indexOf(params.item) ?? -1;
+    if (index >= 0) {
+      this.scrollToIndex({ ...params, index });
+    }
+  }
+
+  public scrollToOffset(params: {
+    animated?: boolean | null | undefined;
+    offset: number;
+  }) {
+    const x = this.props.horizontal ? params.offset : 0;
+    const y = this.props.horizontal ? 0 : params.offset;
+    this.rlvRef?.scrollToOffset(x, y, Boolean(params.animated));
+  }
+
+  public getScrollableNode(): number | null {
+    return this.rlvRef?.getScrollableNode?.() || null;
+  }
+
+  /**
+   * Allows access to internal recyclerlistview. This is useful for enabling access to its public APIs.
+   * Warning: We may swap recyclerlistview for something else in the future. Use with caution.
+   */
+  /* eslint-disable @typescript-eslint/naming-convention */
+  public get recyclerlistview_unsafe(): RecyclerListView<RecyclerListViewProps, any> | undefined {
+    return this.rlvRef;
+  }
+
+  /**
+   * Specifies how far the first item is from top of the list. This would normally be a sum of header size and top/left padding applied to the list.
+   */
+  public get firstItemOffset(): number {
+    return this.distanceFromWindow;
+  }
+
+  /**
+   * FlashList will skip using layout cache on next update. Can be useful when you know the layout will change drastically for example, orientation change when used as a carousel.
+   */
+  public clearLayoutCacheOnUpdate(): void {
+    this.state.layoutProvider.markExpired();
+  }
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled.
+   * This is typically called by taps on items or by navigation actions.
+   */
+  public recordInteraction = (): void => {
+    this.viewabilityManager.recordInteraction();
+  };
+
+  /**
+   * Retriggers viewability calculations. Useful to imperatively trigger viewability calculations.
+   */
+  public recomputeViewableItems = (): void => {
+    this.viewabilityManager.recomputeViewableItems();
+  };
+
+  /**
+   * Returns the dimensions of the child container.
+   * @returns {Object} The dimensions of the child container.
+   */
+  public getChildContainerDimensions(): Dimension | undefined  {
+    return this.rlvRef?.getContentDimension();
+  }
+
+  /**
+   * Returns the layout of the item at the given index.
+   * @param index - The index of the item to get the layout for.
+   * @returns {Object} The layout of the item at the given index.
+   */
+  public getLayout(index: number) : Layout | undefined {
+    return this.rlvRef?.getLayout(index);
+  }
+
+  /**
+   * Returns the size of the list.
+   * @returns {Object} The size of the list.
+   */
+  public getWindowSize(): Dimension | undefined {
+    return this.rlvRef?.getRenderedSize();
+  }
+
+  /**
+   * Returns the absolute last scroll offset of the list.
+   * @returns {number} The absolute last scroll offset of the list.
+   */
+  public getAbsoluteLastScrollOffset(): number {
+    return this.rlvRef?.getCurrentScrollOffset() ?? 0;
+  }
+
+  /**
+   * Returns the first item offset of the list.
+   * @returns {number} The first item offset of the list.
+   */
+  public getFirstItemOffset(): number {
+    return this.firstItemOffset;
+  }
+
+  public getFirstVisibleIndex(): number {
+    return this.rlvRef?.findApproxFirstVisibleIndex() ?? -1;
+  }
+}
+
+export default FlashList;