@shopify/flash-list 1.0.3 → 1.2.0

package/src/FlashList.tsx

@@ -25,12 +25,18 @@ import CustomError from "./errors/CustomError";
 import ExceptionList from "./errors/ExceptionList";
 import WarningList from "./errors/Warnings";
 import ViewabilityManager from "./viewability/ViewabilityManager";
-import { FlashListProps, ContentStyle } from "./FlashListProps";
+import {
+  FlashListProps,
+  ContentStyle,
+  RenderTarget,
+  RenderTargetOptions,
+} from "./FlashListProps";
 import {
   getCellContainerPlatformStyles,
+  getFooterContainer,
   getItemAnimator,
   PlatformConfig,
-} from "./utils/PlatformHelper";
+} from "./native/config/PlatformHelper";
 
 interface StickyProps extends StickyContainerProps {
   children: any;
@@ -59,6 +65,7 @@ class FlashList<T> extends React.PureComponent<
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
   private transformStyle = { transform: [{ scaleY: -1 }] };
+  private transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
   private distanceFromWindow = 0;
   private contentStyle: ContentStyle = {};
   private loadStartTime = 0;
@@ -73,7 +80,6 @@ class FlashList<T> extends React.PureComponent<
     applyToInitialOffset: true,
   };
 
-  private emptyObject = {};
   private postLoadTimeoutId?: ReturnType<typeof setTimeout>;
   private sizeWarningTimeoutId?: ReturnType<typeof setTimeout>;
 
@@ -192,7 +198,7 @@ class FlashList<T> extends React.PureComponent<
   // 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,
-    props: FlashListProps<T>
+    flashListProps: FlashListProps<T>
   ) {
     return new GridLayoutProviderWithProps<T>(
       // max span or, total columns
@@ -228,7 +234,7 @@ class FlashList<T> extends React.PureComponent<
         );
         return mutableLayout?.size;
       },
-      props
+      flashListProps
     );
   }
 
@@ -276,6 +282,7 @@ class FlashList<T> extends React.PureComponent<
       initialScrollIndex,
       style,
       contentContainerStyle,
+      renderScrollComponent,
       ...restProps
     } = this.props;
 
@@ -291,12 +298,12 @@ class FlashList<T> extends React.PureComponent<
 
     return (
       <StickyHeaderContainer
-        overrideRowRenderer={this.stickyRowRenderer}
+        overrideRowRenderer={this.stickyOverrideRowRenderer}
         applyWindowCorrection={this.applyWindowCorrection}
         stickyHeaderIndices={stickyHeaderIndices}
         style={
           this.props.horizontal
-            ? this.emptyObject
+            ? { ...this.getTransform() }
             : { flex: 1, ...this.getTransform() }
         }
       >
@@ -350,6 +357,9 @@ class FlashList<T> extends React.PureComponent<
           windowCorrectionConfig={this.getUpdatedWindowCorrectionConfig()}
           itemAnimator={this.itemAnimator}
           suppressBoundedSizeException
+          externalScrollView={
+            renderScrollComponent as RecyclerListViewProps["externalScrollView"]
+          }
         />
       </StickyHeaderContainer>
     );
@@ -486,7 +496,10 @@ class FlashList<T> extends React.PureComponent<
   };
 
   private getTransform() {
-    return (this.props.inverted && this.transformStyle) || undefined;
+    const transformStyle = this.props.horizontal
+      ? this.transformStyleHorizontal
+      : this.transformStyle;
+    return (this.props.inverted && transformStyle) || undefined;
   }
 
   private getContentContainerInfo() {
@@ -530,11 +543,18 @@ class FlashList<T> extends React.PureComponent<
   }
 
   private separator = (index: number) => {
-    const leadingItem = this.props.data?.[index];
-    const trailingItem = this.props.data?.[index + 1];
-    if (trailingItem === undefined) {
+    // 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,
@@ -565,13 +585,18 @@ class FlashList<T> extends React.PureComponent<
   };
 
   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 (
       <>
-        <View
+        <FooterContainer
+          index={-1}
           style={[this.props.ListFooterComponentStyle, this.getTransform()]}
         >
           {this.getValidComponent(this.props.ListFooterComponent)}
-        </View>
+        </FooterContainer>
         <View
           style={{
             paddingBottom: this.contentStyle.paddingBottom,
@@ -589,7 +614,8 @@ class FlashList<T> extends React.PureComponent<
       this.state.dataProvider.getSize() > 0 ? (
       <View style={{ opacity: 0 }} pointerEvents="none">
         {this.rowRendererWithIndex(
-          Math.min(this.state.dataProvider.getSize() - 1, 1)
+          Math.min(this.state.dataProvider.getSize() - 1, 1),
+          RenderTargetOptions.Measurement
         )}
       </View>
     ) : null;
@@ -615,13 +641,18 @@ class FlashList<T> extends React.PureComponent<
     this.stickyContentContainerRef?.setEnabled(this.isStickyEnabled);
   };
 
-  private rowRendererWithIndex = (index: number) => {
+  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],
+      item: this.props.data![index],
       index,
+      target,
       extraData: this.state.extraData?.value,
-    } as any) as JSX.Element;
+    }) as JSX.Element;
   };
 
   /**
@@ -644,7 +675,7 @@ class FlashList<T> extends React.PureComponent<
                 : "row",
           }}
         >
-          {this.rowRendererWithIndex(index)}
+          {this.rowRendererWithIndex(index, RenderTargetOptions.Cell)}
         </View>
         {this.separator(index)}
       </>
@@ -659,13 +690,18 @@ class FlashList<T> extends React.PureComponent<
     this.stickyContentContainerRef = ref;
   };
 
-  private stickyRowRenderer = (_: any, __: any, index: number, ___: any) => {
+  private stickyOverrideRowRenderer = (
+    _: any,
+    __: any,
+    index: number,
+    ___: any
+  ) => {
     return (
       <PureComponentWrapper
         ref={this.stickyContentRef}
         enabled={this.isStickyEnabled}
         arg={index}
-        renderer={this.rowRendererWithIndex}
+        renderer={this.rowRendererSticky}
       />
     );
   };
@@ -748,16 +784,39 @@ class FlashList<T> extends React.PureComponent<
     viewOffset?: number | undefined;
     viewPosition?: number | undefined;
   }) {
-    // known issue: no support for view offset/position
-    this.rlvRef?.scrollToIndex(params.index, Boolean(params.animated));
+    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;
   }) {
-    this.rlvRef?.scrollToItem(params.item, Boolean(params.animated));
+    const index = this.props.data?.indexOf(params.item) ?? -1;
+    if (index >= 0) {
+      this.scrollToIndex({ ...params, index });
+    }
   }
 
   public scrollToOffset(params: {

package/src/FlashListProps.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import {
   StyleProp,
   ScrollViewProps,
@@ -12,10 +13,25 @@ import ViewToken from "./viewability/ViewToken";
 
 export interface ListRenderItemInfo<TItem> {
   item: TItem;
-
   index: number;
+  /**
+   * FlashList may render your items for multiple reasons.
+   * Cell - This is for your list item
+   * Measurement - Might be invoked for size measurement and won't be visible. You can ignore this in analytics.
+   * StickyHeader - This is for your sticky header. Use this to change your item's appearance while it's being used as a sticky header.
+   */
+  target: RenderTarget;
+  extraData?: any;
 }
 
+export type RenderTarget = "Cell" | "StickyHeader" | "Measurement";
+
+export const RenderTargetOptions: Record<string, RenderTarget> = {
+  Cell: "Cell",
+  StickyHeader: "StickyHeader",
+  Measurement: "Measurement",
+};
+
 export type ListRenderItem<TItem> = (
   info: ListRenderItemInfo<TItem>
 ) => React.ReactElement | null;
@@ -122,6 +138,13 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    */
   ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
 
+  /**
+   * Rendered as the main scrollview.
+   */
+  renderScrollComponent?:
+    | React.ComponentType<ScrollViewProps>
+    | React.FC<ScrollViewProps>;
+
   /**
    * You can use `contentContainerStyle` to apply padding that will be applied to the whole content itself.
    * For example, you can apply this padding, so that all of your items have leading and trailing space.

package/src/__tests__/FlashList.test.tsx

@@ -1,14 +1,20 @@
 import React, { useEffect } from "react";
-import { ScrollView, Text } from "react-native";
+import { Animated, ScrollView, Text, View } from "react-native";
 import "@quilted/react-testing/matchers";
 import { ProgressiveListView } from "recyclerlistview";
 
 import Warnings from "../errors/Warnings";
 import AutoLayoutView from "../native/auto-layout/AutoLayoutView";
 import CellContainer from "../native/cell-container/CellContainer";
+import { ListRenderItemInfo, RenderTargetOptions } from "../FlashListProps";
 
 import { mountFlashList } from "./helpers/mountFlashList";
 
+jest.mock("../native/cell-container/CellContainer", () => {
+  return jest.requireActual("../native/cell-container/CellContainer.ios.ts")
+    .default;
+});
+
 describe("FlashList", () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -600,7 +606,9 @@ describe("FlashList", () => {
 
     // items widths before layout manager change should be 400
     flashList.findAll(CellContainer).forEach((cell) => {
-      expect(cell.instance.props.style.width).toBe(400);
+      if (cell.props.index !== -1) {
+        expect(cell.instance.props.style.width).toBe(400);
+      }
     });
 
     // This will cause a layout manager change
@@ -613,7 +621,9 @@ describe("FlashList", () => {
 
     // items widths after layout manager change should be 900
     flashList.findAll(CellContainer).forEach((cell) => {
-      expect(cell.instance.props.style.width).toBe(900);
+      if (cell.props.index !== -1) {
+        expect(cell.instance.props.style.width).toBe(900);
+      }
     });
 
     flashList.unmount();
@@ -712,6 +722,31 @@ describe("FlashList", () => {
     ).toBe(250);
     flashList.unmount();
   });
+  it("forwards correct renderTarget", () => {
+    const renderItem = ({ target }: ListRenderItemInfo<string>) => {
+      return <Text>{target}</Text>;
+    };
+    const flashList = mountFlashList({
+      data: ["0"],
+      stickyHeaderIndices: [0],
+      renderItem,
+    });
+    expect(flashList.find(Animated.View)?.find(Text)?.props.children).toBe(
+      RenderTargetOptions.StickyHeader
+    );
+    expect(flashList.find(View)?.find(Text)?.props.children).toBe(
+      RenderTargetOptions.Cell
+    );
+    const flashListHorizontal = mountFlashList({
+      renderItem,
+      horizontal: true,
+    });
+    expect(
+      flashListHorizontal
+        .findAllWhere((node: any) => node?.props?.style?.opacity === 0)[0]
+        .find(Text)?.props.children
+    ).toBe("Measurement");
+  });
   it("force updates items only when renderItem change", () => {
     const renderItem = jest.fn(() => <Text>Test</Text>);
     const flashList = mountFlashList({
@@ -735,4 +770,58 @@ describe("FlashList", () => {
     flashList.setProps({ disableAutoLayout: true });
     expect(flashList.find(AutoLayoutView)?.props.disableAutoLayout).toBe(true);
   });
+  it("computes correct scrollTo offset when view position is specified", () => {
+    const flashList = mountFlashList({
+      data: new Array(40).fill(1).map((_, index) => {
+        return index.toString();
+      }),
+    });
+    const plv = flashList.find(ProgressiveListView)
+      ?.instance as ProgressiveListView;
+    const scrollToOffset = jest.spyOn(plv, "scrollToOffset");
+    flashList.instance.scrollToIndex({ index: 10, viewPosition: 0.5 });
+
+    // Each item is 200px in height and to position it in the middle of the window (900 x 400), its offset needs to be
+    // reduced by 350px. That gives us 1650. Other test cases follow the same logic.
+    expect(scrollToOffset).toBeCalledWith(1650, 1650, false, true);
+    flashList.instance.scrollToItem({
+      item: "10",
+      viewPosition: 0.5,
+    });
+    expect(scrollToOffset).toBeCalledWith(1650, 1650, false, true);
+    flashList.setProps({ horizontal: true });
+    flashList.instance.scrollToItem({
+      item: "10",
+      viewPosition: 0.5,
+    });
+    expect(scrollToOffset).toBeCalledWith(1900, 1900, false, true);
+    flashList.unmount();
+  });
+  it("computes correct scrollTo offset when view offset is specified", () => {
+    const flashList = mountFlashList({
+      data: new Array(40).fill(1).map((_, index) => {
+        return index.toString();
+      }),
+    });
+    const plv = flashList.find(ProgressiveListView)
+      ?.instance as ProgressiveListView;
+    const scrollToOffset = jest.spyOn(plv, "scrollToOffset");
+
+    // Each item is 200px in height and to position it in the middle of the window (900 x 400), it's offset needs to be
+    // reduced by 350px + 100px offset. That gives us 1550. Other test cases follow the same logic.
+    flashList.instance.scrollToIndex({
+      index: 10,
+      viewPosition: 0.5,
+      viewOffset: 100,
+    });
+    expect(scrollToOffset).toBeCalledWith(1550, 1550, false, true);
+    flashList.setProps({ horizontal: true });
+    flashList.instance.scrollToItem({
+      item: "10",
+      viewPosition: 0.5,
+      viewOffset: 100,
+    });
+    expect(scrollToOffset).toBeCalledWith(1800, 1800, false, true);
+    flashList.unmount();
+  });
 });

package/src/__tests__/PlatformHelper.web.test.ts

@@ -1,7 +1,7 @@
 import {
   getCellContainerPlatformStyles,
   getItemAnimator,
-} from "../utils/PlatformHelper.web";
+} from "../native/config/PlatformHelper.web";
 
 describe("Platform Helper Web", () => {
   it("can compute right transform for web", () => {
@@ -13,8 +13,18 @@ describe("Platform Helper Web", () => {
       x: 30,
       y: 30,
     });
+    const transformHorizontalInvertedStyle = getCellContainerPlatformStyles(
+      true,
+      {
+        x: 30,
+        y: 30,
+        isHorizontal: true,
+      }
+    );
     const expectedTransform = "translate(20px,70px)";
     const expectedTransformInverted = "translate(30px,30px) scaleY(-1)";
+    const expectedTransformHorizontalInverted =
+      "translate(30px,30px) scaleX(-1)";
 
     expect(transformStyle?.transform).toBe(expectedTransform);
     expect(transformStyle?.WebkitTransform).toBe(expectedTransform);
@@ -22,6 +32,12 @@ describe("Platform Helper Web", () => {
     expect(transformInvertedStyle?.WebkitTransform).toBe(
       expectedTransformInverted
     );
+    expect(transformHorizontalInvertedStyle?.transform).toBe(
+      expectedTransformHorizontalInverted
+    );
+    expect(transformHorizontalInvertedStyle?.WebkitTransform).toBe(
+      expectedTransformHorizontalInverted
+    );
   });
   it("can return an animator", () => {
     expect(getItemAnimator()!["animateWillMount"]).toBeDefined();

package/src/__tests__/helpers/mountFlashList.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { ListRenderItem, Text } from "react-native";
+import { Text } from "react-native";
 import "@quilted/react-testing/matchers";
 import { mount, Root } from "@quilted/react-testing";
 
 import FlashList from "../../FlashList";
-import { FlashListProps } from "../../FlashListProps";
+import { FlashListProps, ListRenderItem } from "../../FlashListProps";
 
 jest.mock("../../FlashList", () => {
   const ActualFlashList = jest.requireActual("../../FlashList").default;

package/src/benchmark/AutoScrollHelper.ts

@@ -66,5 +66,5 @@ export class Cancellable {
     return this._isCancelled;
   }
 
-  public _isCancelled: boolean = false;
+  public _isCancelled = false;
 }

package/src/index.ts

@@ -4,6 +4,8 @@ export {
   ContentStyle,
   ListRenderItem,
   ListRenderItemInfo,
+  RenderTarget,
+  RenderTargetOptions,
 } from "./FlashListProps";
 export { default as AnimatedFlashList } from "./AnimatedFlashList";
 export {

package/src/native/auto-layout/{AutoLayoutViewNativeComponent.web.ts → AutoLayoutViewNativeComponent.android.ts}

@@ -1,8 +1,7 @@
-import React from "react";
-import { View } from "react-native";
+import { requireNativeComponent } from "react-native";
 
 import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
 
 const AutoLayoutViewNativeComponent =
-  View as any as React.Component<AutoLayoutViewNativeComponentProps>;
+  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
 export default AutoLayoutViewNativeComponent;

package/src/native/auto-layout/AutoLayoutViewNativeComponent.ios.ts

@@ -0,0 +1,7 @@
+import { requireNativeComponent } from "react-native";
+
+import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
+
+const AutoLayoutViewNativeComponent =
+  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
+export default AutoLayoutViewNativeComponent;

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

@@ -1,7 +1,7 @@
-import { requireNativeComponent } from "react-native";
+import { HostComponent, View } from "react-native";
 
 import { AutoLayoutViewNativeComponentProps } from "./AutoLayoutViewNativeComponentProps";
 
 const AutoLayoutViewNativeComponent =
-  requireNativeComponent<AutoLayoutViewNativeComponentProps>("AutoLayoutView");
+  View as any as HostComponent<AutoLayoutViewNativeComponentProps>;
 export default AutoLayoutViewNativeComponent;

package/src/native/cell-container/CellContainer.ios.ts

@@ -0,0 +1,7 @@
+import { requireNativeComponent } from "react-native";
+
+/**
+ * Behaves as a regular `View` with an extra `index` prop that is saved in the native layer.
+ */
+const CellContainer = requireNativeComponent("CellContainer");
+export default CellContainer;

package/src/native/cell-container/CellContainer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+export interface CellContainerProps extends ViewProps {
+  index: number;
+}
+
+const CellContainer = React.forwardRef(
+  (props: CellContainerProps, ref: any) => {
+    return <View ref={ref} {...props} />;
+  }
+);
+CellContainer.displayName = "CellContainer";
+export default CellContainer;

package/src/{utils/PlatformHelper.ts → native/config/PlatformHelper.android.ts}

@@ -5,7 +5,7 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   return undefined;
 };
@@ -13,4 +13,14 @@ const getCellContainerPlatformStyles = (
 const getItemAnimator = (): BaseItemAnimator | undefined => {
   return undefined;
 };
-export { PlatformConfig, getCellContainerPlatformStyles, getItemAnimator };
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/native/config/PlatformHelper.ios.ts

@@ -0,0 +1,26 @@
+import { BaseItemAnimator } from "recyclerlistview";
+
+const PlatformConfig = {
+  defaultDrawDistance: 250,
+};
+const getCellContainerPlatformStyles = (
+  inverted: boolean,
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
+): { transform: string; WebkitTransform: string } | undefined => {
+  return undefined;
+};
+
+const getItemAnimator = (): BaseItemAnimator | undefined => {
+  return undefined;
+};
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/native/config/PlatformHelper.ts

@@ -0,0 +1,27 @@
+import { BaseItemAnimator } from "recyclerlistview";
+import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
+
+const PlatformConfig = {
+  defaultDrawDistance: 250,
+};
+const getCellContainerPlatformStyles = (
+  inverted: boolean,
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
+): { transform: string; WebkitTransform: string } | undefined => {
+  return undefined;
+};
+
+const getItemAnimator = (): BaseItemAnimator | undefined => {
+  return new DefaultJSItemAnimator();
+};
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return undefined;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/{utils → native/config}/PlatformHelper.web.ts

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { BaseItemAnimator } from "recyclerlistview";
 import { DefaultJSItemAnimator } from "recyclerlistview/dist/reactnative/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator";
 
@@ -6,10 +8,10 @@ const PlatformConfig = {
 };
 const getCellContainerPlatformStyles = (
   inverted: boolean,
-  parentProps: { x: number; y: number }
+  parentProps: { x: number; y: number; isHorizontal?: boolean }
 ): { transform: string; WebkitTransform: string } | undefined => {
   const transformValue = `translate(${parentProps.x}px,${parentProps.y}px)${
-    inverted ? ` scaleY(-1)` : ``
+    inverted ? ` ${parentProps.isHorizontal ? `scaleX` : `scaleY`}(-1)` : ``
   }`;
   return { transform: transformValue, WebkitTransform: transformValue };
 };
@@ -17,4 +19,14 @@ const getCellContainerPlatformStyles = (
 const getItemAnimator = (): BaseItemAnimator | undefined => {
   return new DefaultJSItemAnimator();
 };
-export { PlatformConfig, getCellContainerPlatformStyles, getItemAnimator };
+
+const getFooterContainer = (): React.ComponentClass | undefined => {
+  return View;
+};
+
+export {
+  PlatformConfig,
+  getCellContainerPlatformStyles,
+  getItemAnimator,
+  getFooterContainer,
+};

package/src/utils/AverageWindow.ts

@@ -5,7 +5,7 @@ export class AverageWindow {
   private currentAverage: number;
   private currentCount: number;
   private inputValues: (number | undefined)[];
-  private nextIndex: number = 0;
+  private nextIndex = 0;
   constructor(size: number, startValue?: number) {
     this.inputValues = new Array<number>(Math.max(1, size));
     this.currentAverage = startValue ?? 0;