Make ViewToken properly typed

CHANGELOG.md

@@ -9,6 +9,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 - Update types to match `react-native@0.72` view types.
   - https://github.com/Shopify/flash-list/pull/890
+- Add type definition for `ViewToken["item"]`
+    - https://github.com/Shopify/flash-list/pull/817
 
 ## [1.5.0] - 2023-07-12
 

documentation/docs/fundamentals/usage.md

@@ -350,17 +350,17 @@ This event is raised once the list has drawn items on the screen. It also report
 ### `onViewableItemsChanged`
 
 ```tsx
-interface ViewToken {
+interface ViewToken<TItem> {
   index: number;
   isViewable: boolean;
-  item: string;
+  item: TItem;
   key: string;
   timestamp: number;
 }
 
 onViewableItemsChanged?: ((info: {
-    viewableItems: ViewToken[];
-    changed: ViewToken[];
+    viewableItems: ViewToken<TItem>[];
+    changed: ViewToken<TItem>[];
 }) => void) | null | undefined
 ```
 
@@ -518,7 +518,7 @@ type ViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPair[];
 interface ViewabilityConfigCallbackPair {
   viewabilityConfig: ViewabilityConfig;
   onViewableItemsChanged:
-    | ((info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void)
+    | ((info: { viewableItems: ViewToken<TItem>[]; changed: ViewToken<TItem>[] }) => void)
     | null;
 }
 

src/FlashListProps.ts

@@ -247,7 +247,10 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    * they might be deferred until JS thread is less busy.
    */
   onViewableItemsChanged?:
-    | ((info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void)
+    | ((info: {
+        viewableItems: ViewToken<TItem>[];
+        changed: ViewToken<TItem>[];
+      }) => void)
     | null
     | undefined;
 

src/MasonryFlashList.tsx

@@ -34,6 +34,7 @@ export interface MasonryFlashListProps<T>
     | "onBlankArea"
     | "renderItem"
     | "viewabilityConfigCallbackPairs"
+    | "onViewableItemsChanged"
   > {
   /**
    * Allows you to change the column widths of the list. This is helpful if you want some columns to be wider than the others.
@@ -59,6 +60,14 @@ export interface MasonryFlashListProps<T>
    * longer be linearly distributed across the columns; instead they are allocated to the column with the least estimated height.
    */
   renderItem: MasonryListRenderItem<T> | null | undefined;
+
+  onViewableItemsChanged?:
+    | ((info: {
+        viewableItems: ViewToken<MasonryListItem<T>>[];
+        changed: ViewToken<MasonryListItem<T>>[];
+      }) => void)
+    | null
+    | undefined;
 }
 
 type OnScrollCallback = ScrollViewProps["onScroll"];
@@ -434,7 +443,9 @@ const getFlashListScrollView = (
   FlashListScrollView.displayName = "FlashListScrollView";
   return FlashListScrollView;
 };
-const updateViewTokens = (tokens: ViewToken[]) => {
+const updateViewTokens = <T extends MasonryListItem<any>>(
+  tokens: ViewToken<T | undefined>[]
+) => {
   const length = tokens.length;
   for (let i = 0; i < length; i++) {
     const token = tokens[i];

src/viewability/ViewToken.ts

@@ -1,5 +1,5 @@
-export default interface ViewToken {
-  item: any;
+export default interface ViewToken<TItem> {
+  item: TItem;
   key: string;
   index: number | null;
   isViewable: boolean;

src/viewability/ViewabilityManager.ts

@@ -95,14 +95,14 @@ export default class ViewabilityManager<T> {
   private createViewabilityHelper = (
     viewabilityConfig: ViewabilityConfig | null | undefined,
     onViewableItemsChanged:
-      | ((info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => void)
+      | ((info: {
+          viewableItems: ViewToken<T>[];
+          changed: ViewToken<T>[];
+        }) => void)
       | null
       | undefined
   ) => {
-    const mapViewToken: (index: number, isViewable: boolean) => ViewToken = (
-      index: number,
-      isViewable: boolean
-    ) => {
+    const mapViewToken = (index: number, isViewable: boolean) => {
       const item = this.flashListRef.props.data?.[index];
       const key =
         item === undefined || this.flashListRef.props.keyExtractor === undefined
@@ -114,7 +114,7 @@ export default class ViewabilityManager<T> {
         item,
         key,
         timestamp: Date.now(),
-      };
+      } as ViewToken<T>;
     };
     return new ViewabilityHelper(
       viewabilityConfig,