Typing error in props viewabilityConfigCallbackPairs

[delphinebugner]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @shopify/flash-list@1.6.3 for the project I'm working on.

There's a typing issue with the viewabilityConfigCallbackPairs props: its uses the react-native typing, which uses the onViewableItemsChanged typing, which uses ViewToken without timestamp in it 😢

I made a quick patch that solved my problem, copy-pasted from the RN repo!

Might do a PR later! With factorizing the onViewableItemsChanged type maybe? always taking the shopify ViewToken!

diff --git a/node_modules/@shopify/flash-list/dist/FlashListProps.d.ts b/node_modules/@shopify/flash-list/dist/FlashListProps.d.ts
index 19055e9..f40b5d3 100644
--- a/node_modules/@shopify/flash-list/dist/FlashListProps.d.ts
+++ b/node_modules/@shopify/flash-list/dist/FlashListProps.d.ts
@@ -1,5 +1,5 @@
 import type React from "react";
-import { StyleProp, ScrollViewProps, ViewabilityConfig, ViewabilityConfigCallbackPairs, ViewStyle } from "react-native";
+import { StyleProp, ScrollViewProps, ViewabilityConfig, ViewStyle } from "react-native";
 import { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
 import ViewToken from "./viewability/ViewToken";
 export interface ListRenderItemInfo<TItem> {
@@ -18,6 +18,7 @@ export declare type RenderTarget = "Cell" | "StickyHeader" | "Measurement";
 export declare const RenderTargetOptions: Record<string, RenderTarget>;
 export declare type ListRenderItem<TItem> = (info: ListRenderItemInfo<TItem>) => React.ReactElement | null;
 export declare type ContentStyle = Pick<ViewStyle, "backgroundColor" | "paddingTop" | "paddingLeft" | "paddingRight" | "paddingBottom" | "padding" | "paddingVertical" | "paddingHorizontal">;
+
 export interface FlashListProps<TItem> extends ScrollViewProps {
     /**
      * Takes an item from `data` and renders it into the list. Typical usage:
diff --git a/node_modules/@shopify/flash-list/src/FlashListProps.ts b/node_modules/@shopify/flash-list/src/FlashListProps.ts
index 77e6096..12e9022 100644
--- a/node_modules/@shopify/flash-list/src/FlashListProps.ts
+++ b/node_modules/@shopify/flash-list/src/FlashListProps.ts
@@ -3,7 +3,6 @@ import {
   StyleProp,
   ScrollViewProps,
   ViewabilityConfig,
-  ViewabilityConfigCallbackPairs,
   ViewStyle,
 } from "react-native";

@@ -333,3 +332,16 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    */
   disableAutoLayout?: boolean;
 }
+
+
+export interface ViewabilityConfigCallbackPair {
+  viewabilityConfig: ViewabilityConfig;
+  onViewableItemsChanged:
+    | ((info: {
+        viewableItems: Array<ViewToken>;
+        changed: Array<ViewToken>;
+      }) => void)
+    | null;
+}
+
+export type ViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPair[];

This issue body was partially generated by patch-package.

[delphinebugner]

Here's the full error message:

Type '{ onViewableItemsChanged: (info: { viewableItems: ViewToken[]; changed: ViewToken[]; }) => void; viewabilityConfig: ViewabilityConfig; }' is not assignable to type 'ViewabilityConfigCallbackPair'.
  Types of property 'onViewableItemsChanged' are incompatible.
    Type '(info: { viewableItems: import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default[]; changed: import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default[]; }) => void' is not assignable to type '(info: { viewableItems: import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewToken[]; changed: import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewT...'.
      Types of parameters 'info' and 'info' are incompatible.
        Type '{ viewableItems: import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewToken[]; changed: import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewToken[]; }' is not assignable to type '{ viewableItems: import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default[]; changed: import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default[]; }'.
          Types of property 'viewableItems' are incompatible.
            Type 'import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewToken[]' is not assignable to type 'import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default[]'.
              Property 'timestamp' is missing in type 'import("../node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ViewToken' but required in type 'import("../node_modules/@shopify/flash-list/dist/viewability/ViewToken").default'.ts(2322)
ViewToken.d.ts(6, 5): 'timestamp' is declared here.