Discord Modifications

CHANGELOG.md

@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- Make `onViewableItemsChanged` better handle floating-point error.
+
 ## [1.6.3] - 2023-11-09
 
 - Changes for RN 0.73 support
@@ -28,6 +30,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
   - https://github.com/Shopify/flash-list/pull/890
 - Add option to clear cached layouts on update
   - https://github.com/Shopify/flash-list/pull/910
+- Add type definition for `ViewToken["item"]`
+  - https://github.com/Shopify/flash-list/pull/817
 
 ## [1.5.0] - 2023-07-12
 

android/build.gradle

@@ -26,13 +26,35 @@ buildscript {
     }
 }
 
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  if (major == 7 && minor >= 3) {
+    return true
+  }
+
+  return major >= 8
+}
+
 android {
+    if (supportsNamespace()) {
+        namespace = "com.shopify.reactnative.flash_list"
+        sourceSets {
+            main {
+                manifest.srcFile "src/main/AndroidManifestNew.xml"
+            }
+        }
+    }
+
     compileSdkVersion _compileSdkVersion
     buildToolsVersion _buildToolsVersion
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_11
+        targetCompatibility JavaVersion.VERSION_11
     }
 
     sourceSets {

android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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;
 }
 

jestSetup.js

@@ -11,6 +11,5 @@ jest.mock("@shopify/flash-list", () => {
   return {
     ...jest.requireActual("@shopify/flash-list"),
     FlashList: MockFlashList,
-    AnimatedFlashList: MockFlashList,
   };
 });

package.json

@@ -25,8 +25,8 @@
   "author": "shopify",
   "license": "MIT",
   "homepage": "https://shopify.github.io/flash-list/",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.d.ts",
   "scripts": {
     "up": "bundle install && yarn fixture-up && yarn e2e-up && yarn build",
     "fixture-web-up": "cd fixture/web-app && yarn && cd ../../",
@@ -61,20 +61,19 @@
     "@babel/core": "^7.18.5",
     "@babel/runtime": "^7.18.3",
     "@quilted/react-testing": "^0.5.14",
-    "@react-native-community/eslint-config": "^3.0.3",
-    "@shopify/eslint-plugin": "^41.3.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@shopify/eslint-plugin": "^44.0.0",
     "@types/jest": "^28.1.3",
-    "@types/react-native": "0.72.2",
     "babel-jest": "^28.1.1",
     "enhanced-resolve": "^5.9.3",
-    "eslint": "8.18.0",
+    "eslint": "8.57.0",
     "gh-pages": "^4.0.0",
     "jest": "^28.1.1",
     "metro-react-native-babel-preset": "^0.71.1",
     "prettier": "^2.7.1",
-    "react": "17.0.2",
-    "react-native": "0.68.5",
-    "typescript": "^4.7.4"
+    "react": "18.2.0",
+    "react-native": "0.72.3",
+    "typescript": "^5.0.3"
   },
   "files": [
     "android",

src/FlashList.tsx

@@ -43,6 +43,28 @@ import {
   updateContentStyle,
 } from "./utils/ContentContainerUtils";
 
+function shallowEqual(a: any, b: any) {
+  if (a === b) {
+    return true;
+  }
+  if (a == null || b == null) {
+    return a == b;
+  }
+
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i];
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
 interface StickyProps extends StickyContainerProps {
   children: any;
 }
@@ -217,7 +239,7 @@ class FlashList<T> extends React.PureComponent<
       data: null,
       layoutProvider: null!!,
       dataProvider: new DataProvider((r1, r2) => {
-        return r1 !== r2;
+        return !shallowEqual(r1, r2);
       }, getStableId),
       numColumns: 0,
     };
@@ -280,6 +302,7 @@ class FlashList<T> extends React.PureComponent<
         />
       );
     }
+    return null;
   };
 
   componentDidMount() {
@@ -316,9 +339,14 @@ class FlashList<T> extends React.PureComponent<
 
     // 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;
+    let initialOffset: number | undefined = this.props.initialScrollOffset ?? 0;
+    if (this.isInitialScrollIndexInFirstRow() && this.distanceFromWindow) {
+      initialOffset += this.distanceFromWindow;
+    }
+    if (initialOffset === 0) {
+      initialOffset = undefined;
+    }
+
     const finalDrawDistance =
       drawDistance === undefined
         ? PlatformConfig.defaultDrawDistance
@@ -402,10 +430,10 @@ class FlashList<T> extends React.PureComponent<
     this.props.onScrollBeginDrag?.(event);
   };
 
-  private onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+  private onScroll: RecyclerListViewProps["onScroll"] = (event) => {
     this.recordInteraction();
     this.viewabilityManager.updateViewableItems();
-    this.props.onScroll?.(event);
+    this.props.onScroll?.(event as NativeSyntheticEvent<NativeScrollEvent>);
   };
 
   private getUpdatedWindowCorrectionConfig() {
@@ -452,7 +480,13 @@ class FlashList<T> extends React.PureComponent<
     }
   };
 
-  private container = (props: object, children: React.ReactNode[]) => {
+  private container: RecyclerListViewProps["renderContentContainer"] = (
+    props,
+    child
+  ) => {
+    const children =
+      // eslint-disable-next-line no-negated-condition,no-nested-ternary
+      child != null ? (child instanceof Array ? child : [child]) : [];
     this.clearPostLoadTimeout();
     return (
       <>
@@ -619,11 +653,13 @@ class FlashList<T> extends React.PureComponent<
   private getValidComponent(
     component: React.ComponentType | React.ReactElement | null | undefined
   ) {
+    if (component == null) return null;
     const PassedComponent = component;
-    return (
-      (React.isValidElement(PassedComponent) && PassedComponent) ||
-      (PassedComponent && <PassedComponent />) ||
-      null
+    return React.isValidElement(PassedComponent) ? (
+      PassedComponent
+    ) : (
+      // @ts-expect-error not sure how to type this properly
+      <PassedComponent />
     );
   }
 
@@ -641,8 +677,9 @@ class FlashList<T> extends React.PureComponent<
   };
 
   private rowRendererWithIndex = (index: number, target: RenderTarget) => {
+    if (this.props.renderItem == null) return null;
     // known issue: expected to pass separators which isn't available in RLV
-    return this.props.renderItem?.({
+    return this.props.renderItem({
       item: this.props.data![index],
       index,
       target,
@@ -769,6 +806,10 @@ class FlashList<T> extends React.PureComponent<
     }
   }
 
+  public updateViewableItems() {
+    this.viewabilityManager.updateViewableItems();
+  }
+
   public scrollToEnd(params?: { animated?: boolean | null | undefined }) {
     this.rlvRef?.scrollToEnd(Boolean(params?.animated));
   }

src/FlashListProps.ts

@@ -1,14 +1,14 @@
 import type React from "react";
-import {
+import type {
   StyleProp,
   ScrollViewProps,
   ViewabilityConfig,
   ViewabilityConfigCallbackPairs,
   ViewStyle,
 } from "react-native";
 
-import { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
-import ViewToken from "./viewability/ViewToken";
+import type { BlankAreaEventHandler } from "./native/auto-layout/AutoLayoutView";
+import type ViewToken from "./viewability/ViewToken";
 
 export interface ListRenderItemInfo<TItem> {
   item: TItem;
@@ -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;
 
@@ -332,4 +335,14 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
    * `false` again.
    */
   disableAutoLayout?: boolean;
+
+  initialScrollOffset?: number;
+
+  /**
+   * If the FlashList is in a bottom sheet, some rendered items can be off screen.
+   * The value in this ref represents the height of the off-screen area, so onViewableItemsChanged
+   * can consider the visible area of the bottom sheet in its calculations.
+   */
+  bottomViewabilityInsetRef?: React.MutableRefObject<number>;
+  topViewabilityInsetRef?: React.MutableRefObject<number>;
 }

src/GridLayoutProviderWithProps.ts

@@ -5,7 +5,7 @@ import {
   LayoutManager,
 } from "recyclerlistview";
 
-import { FlashListProps } from "./FlashListProps";
+import type { FlashListProps } from "./FlashListProps";
 import { AverageWindow } from "./utils/AverageWindow";
 import { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
 

src/MasonryFlashList.tsx

@@ -11,9 +11,9 @@ import {
 import CustomError from "./errors/CustomError";
 import ExceptionList from "./errors/ExceptionList";
 import FlashList from "./FlashList";
-import { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
+import type { FlashListProps, ListRenderItemInfo } from "./FlashListProps";
 import { applyContentContainerInsetForLayoutManager } from "./utils/ContentContainerUtils";
-import ViewToken from "./viewability/ViewToken";
+import type ViewToken from "./viewability/ViewToken";
 
 export interface MasonryListRenderItemInfo<TItem>
   extends ListRenderItemInfo<TItem> {
@@ -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/PureComponentWrapper.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 export interface PureComponentWrapperProps {
-  renderer: (arg: unknown) => JSX.Element | null;
+  renderer: (arg: any) => JSX.Element | null;
 
   /** Renderer is called with this argument.
    * Don't change this value everytime or else component will always rerender. Prefer primitives. */

src/__tests__/GridLayoutProviderWithProps.test.ts

@@ -1,7 +1,7 @@
 import { ScrollView } from "react-native";
 import { ProgressiveListView } from "recyclerlistview";
 
-import FlashList from "../FlashList";
+import type FlashList from "../FlashList";
 
 import { mountFlashList } from "./helpers/mountFlashList";