@shopify/flash-list 2.0.0-alpha.21 → 2.0.0-alpha.22

package/src/recyclerview/RecyclerView.tsx

@@ -20,6 +20,7 @@ import {
 } from "react-native";
 
 import { FlashListRef } from "../FlashListRef";
+import { ErrorMessages } from "../errors/ErrorMessages";
 
 import { RVDimension } from "./layout-managers/LayoutManager";
 import {
@@ -384,6 +385,9 @@ const RecyclerViewComponent = <T,>(
       stickyHeaderIndices &&
       stickyHeaderIndices.length > 0
     ) {
+      if (horizontal) {
+        throw new Error(ErrorMessages.stickyHeadersNotSupportedForHorizontal);
+      }
       return (
         <StickyHeaders
           stickyHeaderIndices={stickyHeaderIndices}
@@ -402,6 +406,7 @@ const RecyclerViewComponent = <T,>(
     stickyHeaderIndices,
     renderItem,
     scrollY,
+    horizontal,
     recyclerViewManager,
     extraData,
   ]);

package/src/recyclerview/RecyclerViewManager.ts

@@ -1,5 +1,6 @@
-import ViewabilityManager from "../viewability/ViewabilityManager";
+import { ErrorMessages } from "../errors/ErrorMessages";
 
+import ViewabilityManager from "./viewability/ViewabilityManager";
 import { ConsecutiveNumbers } from "./helpers/ConsecutiveNumbers";
 import { RVGridLayoutManagerImpl } from "./layout-managers/GridLayoutManager";
 import {
@@ -131,9 +132,7 @@ export class RecyclerViewManager<T> {
 
   getLayout(index: number) {
     if (!this.layoutManager) {
-      throw new Error(
-        "LayoutManager is not initialized, layout info is unavailable"
-      );
+      throw new Error(ErrorMessages.layoutManagerNotInitializedLayoutInfo);
     }
     return this.layoutManager.getLayout(index);
   }
@@ -152,9 +151,7 @@ export class RecyclerViewManager<T> {
   // Doesn't include header / foot etc
   getChildContainerDimensions() {
     if (!this.layoutManager) {
-      throw new Error(
-        "LayoutManager is not initialized, child container layout is unavailable"
-      );
+      throw new Error(ErrorMessages.layoutManagerNotInitializedChildContainer);
     }
     return this.layoutManager.getLayoutSize();
   }
@@ -165,9 +162,7 @@ export class RecyclerViewManager<T> {
 
   getWindowSize() {
     if (!this.layoutManager) {
-      throw new Error(
-        "LayoutManager is not initialized, window size is unavailable"
-      );
+      throw new Error(ErrorMessages.layoutManagerNotInitializedWindowSize);
     }
     return this.layoutManager.getWindowsSize();
   }
@@ -211,9 +206,7 @@ export class RecyclerViewManager<T> {
       Boolean(this.layoutManager?.isHorizontal()) !==
         Boolean(this.propsRef.horizontal)
     ) {
-      throw new Error(
-        "Horizontal prop cannot be toggled, you can use a key on FlashList to recreate it."
-      );
+      throw new Error(ErrorMessages.horizontalPropCannotBeToggled);
     }
     if (this._isLayoutManagerDirty) {
       this.layoutManager = undefined;
@@ -245,9 +238,7 @@ export class RecyclerViewManager<T> {
 
   computeVisibleIndices() {
     if (!this.layoutManager) {
-      throw new Error(
-        "LayoutManager is not initialized, visible indices are not unavailable"
-      );
+      throw new Error(ErrorMessages.layoutManagerNotInitializedVisibleIndices);
     }
     return this.engagedIndicesTracker.computeVisibleIndices(this.layoutManager);
   }
@@ -360,10 +351,10 @@ export class RecyclerViewManager<T> {
   private getLayoutManagerClass() {
     // throw errors for incompatible props
     if (this.propsRef.masonry && this.propsRef.horizontal) {
-      throw new Error("Masonry and horizontal props are incompatible");
+      throw new Error(ErrorMessages.masonryAndHorizontalIncompatible);
     }
     if (this.numColumns > 1 && this.propsRef.horizontal) {
-      throw new Error("numColumns and horizontal props are incompatible");
+      throw new Error(ErrorMessages.numColumnsAndHorizontalIncompatible);
     }
     return this.propsRef.masonry
       ? RVMasonryLayoutManagerImpl

package/src/recyclerview/RecyclerViewProps.ts

@@ -1,11 +1 @@
-import { ScrollViewProps } from "react-native";
-
-import { FlashListProps } from "../FlashListProps";
-
-export interface RecyclerViewProps<TItem>
-  extends Omit<FlashListProps<TItem>, "contentContainerStyle"> {
-  /**
-   * Style for the RecyclerView's parent container.
-   */
-  contentContainerStyle?: ScrollViewProps["contentContainerStyle"];
-}
+export { FlashListProps as RecyclerViewProps } from "../FlashListProps";

package/src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -21,6 +21,7 @@ import { adjustOffsetForRTL } from "../utils/adjustOffsetForRTL";
 import { RVLayout } from "../layout-managers/LayoutManager";
 import { ScrollAnchorRef } from "../components/ScrollAnchor";
 import { PlatformConfig } from "../../native/config/PlatformHelper";
+import { WarningMessages } from "../../errors/WarningMessages";
 
 import { useUnmountFlag } from "./useUnmountFlag";
 import { useUnmountAwareTimeout } from "./useUnmountAwareCallbacks";
@@ -548,6 +549,9 @@ export function useRecyclerViewController<T>(
        * Disables item recycling in preparation for layout animations.
        */
       prepareForLayoutAnimationRender: () => {
+        if (!recyclerViewManager.props.keyExtractor) {
+          console.warn(WarningMessages.keyExtractorNotDefinedForAnimation);
+        }
         recyclerViewManager.animationOptimizationsEnabled = true;
       },
     };

package/src/recyclerview/layout-managers/LayoutManager.ts

@@ -7,6 +7,7 @@ import {
   findLastVisibleIndex,
 } from "../utils/findVisibleIndex";
 import { areDimensionsNotEqual } from "../utils/measureLayout";
+import { ErrorMessages } from "../../errors/ErrorMessages";
 
 /**
  * Base abstract class for layout managers in the recycler view system.
@@ -224,7 +225,7 @@ export abstract class RVLayoutManager {
    */
   getLayout(index: number): RVLayout {
     if (index >= this.layouts.length) {
-      throw new Error("index out of bounds, not enough layouts");
+      throw new Error(ErrorMessages.indexOutOfBounds);
     }
     let layout = this.layouts[index];
     if (!layout) {

package/src/{viewability → recyclerview/viewability}/ViewabilityHelper.ts

@@ -1,8 +1,7 @@
 import { ViewabilityConfig } from "react-native";
-import { Dimension, Layout } from "recyclerlistview";
 
-import CustomError from "../errors/CustomError";
-import ExceptionList from "../errors/ExceptionList";
+import { RVDimension, RVLayout } from "../layout-managers/LayoutManager";
+import { ErrorMessages } from "../../errors/ErrorMessages";
 
 /**
  * Helper class for computing viewable items based on the passed `viewabilityConfig`.
@@ -48,8 +47,8 @@ class ViewabilityHelper {
   public updateViewableItems(
     horizontal: boolean,
     scrollOffset: number,
-    listSize: Dimension,
-    getLayout: (index: number) => Layout | undefined,
+    listSize: RVDimension,
+    getLayout: (index: number) => RVLayout | undefined,
     viewableIndices?: number[]
   ) {
     if (viewableIndices !== undefined) {
@@ -61,8 +60,8 @@ class ViewabilityHelper {
       this.viewabilityConfig?.viewAreaCoveragePercentThreshold !== null &&
       this.viewabilityConfig?.viewAreaCoveragePercentThreshold !== undefined
     ) {
-      throw new CustomError(
-        ExceptionList.multipleViewabilityThresholdTypesNotSupported
+      throw new Error(
+        ErrorMessages.multipleViewabilityThresholdTypesNotSupported
       );
     }
     if (
@@ -126,10 +125,10 @@ class ViewabilityHelper {
     index: number,
     horizontal: boolean,
     scrollOffset: number,
-    listSize: Dimension,
+    listSize: RVDimension,
     viewAreaCoveragePercentThreshold: number | null | undefined,
     itemVisiblePercentThreshold: number | null | undefined,
-    getLayout: (index: number) => Layout | undefined
+    getLayout: (index: number) => RVLayout | undefined
   ) {
     const itemLayout = getLayout(index);
     if (itemLayout === undefined) {

package/src/{viewability → recyclerview/viewability}/ViewabilityManager.ts

@@ -1,6 +1,6 @@
 import { ViewabilityConfig } from "react-native";
 
-import FlashList from "../FlashList";
+import { RecyclerViewManager } from "../RecyclerViewManager";
 
 import ViewabilityHelper from "./ViewabilityHelper";
 import ViewToken from "./ViewToken";
@@ -9,31 +9,31 @@ import ViewToken from "./ViewToken";
  * Manager for viewability tracking. It holds multiple viewability callback pairs and keeps them updated.
  */
 export default class ViewabilityManager<T> {
-  private flashListRef: FlashList<T>;
+  private rvManager: RecyclerViewManager<T>;
   private viewabilityHelpers: ViewabilityHelper[] = [];
   private hasInteracted = false;
 
-  constructor(flashListRef: FlashList<T>) {
-    this.flashListRef = flashListRef;
+  constructor(rvManager: RecyclerViewManager<T>) {
+    this.rvManager = rvManager;
     if (
-      flashListRef.props.onViewableItemsChanged !== null &&
-      flashListRef.props.onViewableItemsChanged !== undefined
+      rvManager.props.onViewableItemsChanged !== null &&
+      rvManager.props.onViewableItemsChanged !== undefined
     ) {
       this.viewabilityHelpers.push(
         this.createViewabilityHelper(
-          flashListRef.props.viewabilityConfig,
+          rvManager.props.viewabilityConfig,
           (info) => {
-            flashListRef.props.onViewableItemsChanged?.(info);
+            rvManager.props.onViewableItemsChanged?.(info);
           }
         )
       );
     }
-    (flashListRef.props.viewabilityConfigCallbackPairs ?? []).forEach(
+    (rvManager.props.viewabilityConfigCallbackPairs ?? []).forEach(
       (pair, index) => {
         this.viewabilityHelpers.push(
           this.createViewabilityHelper(pair.viewabilityConfig, (info) => {
             const callback =
-              flashListRef.props.viewabilityConfigCallbackPairs?.[index]
+              rvManager.props.viewabilityConfigCallbackPairs?.[index]
                 ?.onViewableItemsChanged;
             callback?.(info);
           })
@@ -71,21 +71,19 @@ export default class ViewabilityManager<T> {
   };
 
   public updateViewableItems = (newViewableIndices?: number[]) => {
-    const listSize =
-      this.flashListRef.getWindowSize() ??
-      this.flashListRef.props.estimatedListSize;
+    const listSize = this.rvManager.getWindowSize();
     if (listSize === undefined || !this.shouldListenToVisibleIndices) {
       return;
     }
     const scrollOffset =
-      (this.flashListRef.getAbsoluteLastScrollOffset() ?? 0) -
-      this.flashListRef.firstItemOffset;
+      (this.rvManager.getAbsoluteLastScrollOffset() ?? 0) -
+      this.rvManager.firstItemOffset;
     this.viewabilityHelpers.forEach((viewabilityHelper) => {
       viewabilityHelper.updateViewableItems(
-        this.flashListRef.props.horizontal ?? false,
+        this.rvManager.props.horizontal ?? false,
         scrollOffset,
         listSize,
-        (index: number) => this.flashListRef.getLayout(index),
+        (index: number) => this.rvManager.getLayout(index),
         newViewableIndices
       );
     });
@@ -117,11 +115,11 @@ export default class ViewabilityManager<T> {
       index: number,
       isViewable: boolean
     ) => {
-      const item = this.flashListRef.props.data![index];
+      const item = this.rvManager.props.data![index];
       const key =
-        item === undefined || this.flashListRef.props.keyExtractor === undefined
+        item === undefined || this.rvManager.props.keyExtractor === undefined
           ? index.toString()
-          : this.flashListRef.props.keyExtractor(item, index);
+          : this.rvManager.props.keyExtractor(item, index);
       return {
         index,
         isViewable,

package/RNFlashList.podspec

@@ -1,37 +0,0 @@
-require 'json'
-
-package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
-new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED']
-
-Pod::Spec.new do |s|
-  s.name             = 'RNFlashList'
-  s.version          = package['version']
-  s.summary          = package['description']
-  s.homepage         = package['homepage']
-  s.license          = package['license']
-  s.author           = package['author']
-  s.platforms        = { :ios => '11.0', :tvos => '12.0' }
-  s.source           = { git: 'https://github.com/shopify/flash-list.git', tag: "v#{s.version}" }
-  s.source_files     = 'ios/Sources/**/*'
-  s.requires_arc     = true
-  s.swift_version    = '5.0'
-
-  if new_arch_enabled
-    s.pod_target_xcconfig = {
-      'OTHER_SWIFT_FLAGS' => '-D RCT_NEW_ARCH_ENABLED',
-    }
-  end
-
-  # install_modules_dependencies is available since RN 0.71
-  if respond_to?(:install_modules_dependencies, true)
-    install_modules_dependencies(s)
-  else
-    s.dependency "React-Core"
-  end
-
-  # Tests spec
-  s.test_spec 'Tests' do |test_spec|
-    test_spec.source_files = 'ios/Tests/**/*'
-    test_spec.framework = 'XCTest'
-  end
-end

package/android/build.gradle

@@ -1,89 +0,0 @@
-def isNewArchitectureEnabled() {
-    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
-}
-
-apply plugin: 'com.android.library'
-
-apply plugin: 'kotlin-android'
-
-if (isNewArchitectureEnabled()) {
-    apply plugin: 'com.facebook.react'
-}
-
-def _ext = rootProject.ext
-
-def _reactNativeVersion = _ext.has('reactNative') ? _ext.reactNative : '+'
-def _compileSdkVersion = _ext.has('compileSdkVersion') ? _ext.compileSdkVersion : 30
-def _buildToolsVersion = _ext.has('buildToolsVersion') ? _ext.buildToolsVersion : '30.0.2'
-def _minSdkVersion = _ext.has('minSdkVersion') ? _ext.minSdkVersion : 21
-def _targetSdkVersion = _ext.has('targetSdkVersion') ? _ext.targetSdkVersion : 30
-def _junitVersion = _ext.has('junitVersion') ? _ext.junitVersion : '4.13.2'
-def _mockitoVersion = _ext.has('mockitoVersion') ? _ext.mockitoVersion : '3.2.0'
-def _androidTestRunnerVersion = _ext.has('androidTestRunnerVersion') ? _ext.androidTestRunnerVersion : '1.1.0'
-
-buildscript {
-    // buildscript is evaluated before any other task is executed, so this must be defined here
-    ext._kotlinVersion = rootProject.ext.has("kotlinVersion") ?  rootProject.ext.get('kotlinVersion') : '1.8.10'
-
-    repositories {
-        mavenCentral()
-    }
-
-    dependencies {
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${_kotlinVersion}")
-    }
-}
-
-android {
-    compileSdkVersion _compileSdkVersion
-    buildToolsVersion _buildToolsVersion
-
-    // Conditional for compatibility with AGP <4.2.
-    if (project.android.hasProperty("namespace")) {
-        namespace = "com.shopify.reactnative.flash_list"
-    }
-
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
-
-    sourceSets {
-        main.java.srcDirs += 'src/main/kotlin'
-        debug.java.srcDirs += 'src/debug/kotlin'
-        test.java.srcDirs += 'src/test/kotlin'
-        androidTest.java.srcDirs += 'src/androidTest/kotlin'
-
-        if (!isNewArchitectureEnabled()) {
-            main.java.srcDirs += ['src/paper/java']
-        }
-    }
-
-    defaultConfig {
-        minSdkVersion _minSdkVersion
-        targetSdkVersion _targetSdkVersion
-        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
-        versionCode 1
-        versionName "1.0"
-        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
-    }
-
-    lintOptions {
-        abortOnError false
-    }
-
-    testOptions {
-      unitTests.returnDefaultValues = true
-    }
-}
-
-dependencies {
-    compileOnly "com.facebook.react:react-native:${_reactNativeVersion}"
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${_kotlinVersion}"
-    testImplementation "junit:junit:${_junitVersion}"
-    testImplementation "org.mockito.kotlin:mockito-kotlin:${_mockitoVersion}"
-    testImplementation "org.mockito:mockito-inline:${_mockitoVersion}"
-    testImplementation 'com.google.code.gson:gson:2.8.9'
-    androidTestImplementation("androidx.test:runner:${_androidTestRunnerVersion}")
-    androidTestImplementation("androidx.test:rules:${_androidTestRunnerVersion}")
-}

package/android/src/main/AndroidManifest.xml

@@ -1,3 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.shopify.reactnative.flash_list">
-</manifest>

package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutShadow.kt

@@ -1,105 +0,0 @@
-package com.shopify.reactnative.flash_list
-
-class AutoLayoutShadow {
-    var horizontal: Boolean = false
-    var scrollOffset: Int = 0
-    var offsetFromStart: Int = 0
-    var windowSize: Int = 0
-    var renderOffset = 0
-
-    var blankOffsetAtStart = 0 // Tracks blank area from the top
-    var blankOffsetAtEnd = 0 // Tracks blank area from the bottom
-
-    var lastMaxBoundOverall = 0 // Tracks where the last pixel is drawn in the overall
-
-    private var lastMaxBound = 0 // Tracks where the last pixel is drawn in the visible window
-    private var lastMinBound = 0 // Tracks where first pixel is drawn in the visible window
-
-    /** Checks for overlaps or gaps between adjacent items and then applies a correction (Only Grid layouts with varying spans)
-     * Performance: RecyclerListView renders very small number of views and this is not going to trigger multiple layouts on Android side. Not expecting any major perf issue. */
-    fun clearGapsAndOverlaps(sortedItems: Array<CellContainer>) {
-        var maxBound = 0
-        var minBound = Int.MAX_VALUE
-        var maxBoundNeighbour = 0
-        lastMaxBoundOverall = 0
-        for (i in 0 until sortedItems.size - 1) {
-            val cell = sortedItems[i]
-            val neighbour = sortedItems[i + 1]
-            // Only apply correction if the next cell is consecutive.
-            val isNeighbourConsecutive = neighbour.index == cell.index + 1
-            if (isWithinBounds(cell) || isWithinBounds(neighbour)) {
-                if (!horizontal) {
-                    maxBound = kotlin.math.max(maxBound, cell.bottom);
-                    minBound = kotlin.math.min(minBound, cell.top);
-                    maxBoundNeighbour = maxBound
-                    if (isNeighbourConsecutive) {
-                        if (cell.left < neighbour.left) {
-                            if (cell.right != neighbour.left) {
-                                neighbour.right = cell.right + neighbour.width
-                                neighbour.left = cell.right
-                            }
-                            if (cell.top != neighbour.top) {
-                                neighbour.bottom = cell.top + neighbour.height
-                                neighbour.top = cell.top
-                            }
-                        } else {
-                            neighbour.bottom = maxBound + neighbour.height
-                            neighbour.top = maxBound
-                        }
-                    }
-                    if (isWithinBounds(neighbour)) {
-                        maxBoundNeighbour = kotlin.math.max(maxBound, neighbour.bottom)
-                    }
-                } else {
-                    maxBound = kotlin.math.max(maxBound, cell.right);
-                    minBound = kotlin.math.min(minBound, cell.left);
-                    maxBoundNeighbour = maxBound
-                    if (isNeighbourConsecutive) {
-                        if (cell.top < neighbour.top) {
-                            if (cell.bottom != neighbour.top) {
-                                neighbour.bottom = cell.bottom + neighbour.height
-                                neighbour.top = cell.bottom
-                            }
-                            if (cell.left != neighbour.left) {
-                                neighbour.right = cell.left + neighbour.width
-                                neighbour.left = cell.left
-                            }
-                        } else {
-                            neighbour.right = maxBound + neighbour.width
-                            neighbour.left = maxBound
-                        }
-                    }
-                    if (isWithinBounds(neighbour)) {
-                        maxBoundNeighbour = kotlin.math.max(maxBound, neighbour.right)
-                    }
-                }
-            }
-            lastMaxBoundOverall = kotlin.math.max(lastMaxBoundOverall, if (horizontal) cell.right else cell.bottom)
-            lastMaxBoundOverall = kotlin.math.max(lastMaxBoundOverall, if (horizontal) neighbour.right else neighbour.bottom)
-        }
-        lastMaxBound = maxBoundNeighbour
-        lastMinBound = minBound
-    }
-
-    /** Offset provided by react can be one frame behind the real one, it's important that this method is called with offset taken directly from
-     * scrollview object */
-    fun computeBlankFromGivenOffset(actualScrollOffset: Int, distanceFromWindowStart: Int, distanceFromWindowEnd: Int): Int {
-        val actualScrollOffset = actualScrollOffset - offsetFromStart;
-        blankOffsetAtStart = lastMinBound - actualScrollOffset - distanceFromWindowStart
-        blankOffsetAtEnd = actualScrollOffset + windowSize - renderOffset - lastMaxBound - distanceFromWindowEnd
-        return kotlin.math.max(blankOffsetAtStart, blankOffsetAtEnd)
-    }
-
-    /** It's important to avoid correcting views outside the render window. An item that isn't being recycled might still remain in the view tree. If views outside get considered then gaps between
-     * unused items will cause algorithm to fail.*/
-    private fun isWithinBounds(cell: CellContainer): Boolean {
-        val scrollOffset = scrollOffset - offsetFromStart;
-        return if (!horizontal) {
-            (cell.top >= (scrollOffset - renderOffset) || cell.bottom >= (scrollOffset - renderOffset)) &&
-                    (cell.top <= scrollOffset + windowSize || cell.bottom <= scrollOffset + windowSize)
-        } else {
-            (cell.left >= (scrollOffset - renderOffset) || cell.right >= (scrollOffset - renderOffset)) &&
-                    (cell.left <= scrollOffset + windowSize || cell.right <= scrollOffset + windowSize)
-        }
-    }
-}