#104: Convert onEndReachedThreshold from pixels to ratio (#148)

* Upgrade recyclerlistview to 3.1.0-beta.6

* Pass onEndReachedThreshold prop

README.md

@@ -14,7 +14,7 @@ Check out [the Vault project](https://vault.shopify.io/projects/22845) to learn
 
 ### Adding a package to your project
 
-Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.5`, and run pod install in the `ios` directory.
+Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.6`, and run pod install in the `ios` directory.
 
 Note that [`recyclerlistview`](https://github.com/Flipkart/recyclerlistview) is a peer dependency of `@shopify/flash-list`
 

documentation/docs/index.md

@@ -17,7 +17,7 @@ Check out [the Vault project](https://vault.shopify.io/projects/22845) to learn
 
 ### Adding a package to your project
 
-Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.5` and run `pod install` in the `ios` directory.
+Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.6` and run `pod install` in the `ios` directory.
 
 :::note
 [`recyclerlistview`](https://github.com/Flipkart/recyclerlistview) is a peer dependency of `@shopify/flash-list`.

documentation/docs/known-issues.md

@@ -23,26 +23,22 @@ This is something that hasn't been implemented yet. It will be part of the first
 
 It's not implemented yet but will be part of final release.
 
-### 4) `onEndReachedThreshold` value isn't working
-
-Please note that value accepted is in dp/px and not a multiplier to window size. Please make the change accordingly. We will address this in the future.
-
-### 5) `onEndReached` event doesn't have `distanceFromEnd`
+### 4) `onEndReached` event doesn't have `distanceFromEnd`
 
 This value is reported as 0. We don't have plans to implement this right now. Please provide feedback if this is important to you.
 
-### 6)`scrollToIndex` doesn't have `offset` support
+### 5)`scrollToIndex` doesn't have `offset` support
 
 The list only guarantees to bring the given index in view port (as close to the top as possible). There is no support for additional customization.
 
-### 7) `renderItem` callback doesn't have all features
+### 6) `renderItem` callback doesn't have all features
 
 As of now we only provide relevant data and index. No plans to change this.
 
-### 8) `viewability` related callbacks are missing
+### 7) `viewability` related callbacks are missing
 
 We are planning to add a version of this but we can't guarantee if it will be exactly same a `FlatList`.
 
-### 9) Horizontal lists do not change height to match tallest child
+### 8) Horizontal lists do not change height to match tallest child
 
 As of now, horizontal lists need a fixed height. It's not possible to resize it based on height of the tallest child item. This is because children have absolute positions and cannot expand the parent. This is something we will address in the future. Please provide feedback if this is important to you. Using `onLayout` to measure and resize is a possible workaround but it can cause visible movement on screen.

fixture/ios/Podfile.lock

@@ -356,9 +356,9 @@ PODS:
     - React-Core
     - SDWebImage (~> 5.11.1)
     - SDWebImageWebPCoder (~> 0.8.4)
-  - RNFlashList (0.1.0):
+  - RNFlashList (0.2.1):
     - React-Core
-  - RNFlashList/Tests (0.1.0):
+  - RNFlashList/Tests (0.2.1):
     - React-Core
   - RNGestureHandler (2.2.0):
     - React-Core
@@ -582,7 +582,7 @@ SPEC CHECKSUMS:
   ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4
   ReactNativePerformanceListsProfiler: 68334bc2a688cdd6762dcf0a71fe9f84abdfa0c9
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
-  RNFlashList: 7060ac139635ea64b9af68243c3671a870e7f7bd
+  RNFlashList: 2c3c0fed6997ec5f462627e5126246200c45681a
   RNGestureHandler: bf572f552ea324acd5b5464b8d30755b2d8c1de6
   RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d

fixture/package.json

@@ -19,7 +19,7 @@
     "react-native-gesture-handler": "^2.3.1",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.13.1",
-    "recyclerlistview": "3.1.0-beta.5"
+    "recyclerlistview": "3.1.0-beta.6"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.1.0",

fixture/yarn.lock

@@ -4041,10 +4041,10 @@ recast@^0.20.3:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
-recyclerlistview@3.1.0-beta.5:
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.5.tgz#ef379cc51f4e73d1ccae68b5b95f459b3d665a98"
-  integrity sha512-9s75KHbOxuSejAS76Th8tSW1youTHQXnJR+oI1rYoesaHqie3JdvQZww6akinydSAJ4s0SeMto2pTq1IiapYSQ==
+recyclerlistview@3.1.0-beta.6:
+  version "3.1.0-beta.6"
+  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.6.tgz#b92d2daae6d871efe7f500da1064a58175832516"
+  integrity sha512-qfhvhgDQYfQHC5FhNsiztpF7yeI7tD3Dj58xrlSOXrDSoUJVvctrtX2hmV0ytLkPdHCnGkSpr9HbeRK/rR29Gw==
   dependencies:
     lodash.debounce "4.0.8"
     prop-types "15.5.8"

package.json

@@ -26,7 +26,7 @@
     "@babel/runtime": "*",
     "react": "*",
     "react-native": "*",
-    "recyclerlistview": "3.1.0-beta.5"
+    "recyclerlistview": "3.1.0-beta.6"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -40,7 +40,7 @@
     "metro-react-native-babel-preset": "^0.69.0",
     "react": "17.0.2",
     "react-native": "0.66.4",
-    "recyclerlistview": "3.1.0-beta.5",
+    "recyclerlistview": "3.1.0-beta.6",
     "typescript": "^4.6.2"
   },
   "jest": {

src/FlashList.tsx

@@ -6,7 +6,6 @@ import {
   LayoutChangeEvent,
   ViewStyle,
   ColorValue,
-  Dimensions,
 } from "react-native";
 import {
   DataProvider,
@@ -304,12 +303,6 @@ class FlashList<T> extends React.PureComponent<
 
     const finalDrawDistance = drawDistance === undefined ? 250 : drawDistance;
 
-    // TODO: Wait for #104 (https://github.com/Shopify/flash-list/issues/104) to be fixed and remove this. Temp workaround
-    const endDetectionThreshold =
-      (horizontal
-        ? Dimensions.get("window").width
-        : Dimensions.get("window").height) * (onEndReachedThreshold || 0);
-
     return (
       <StickyHeaderContainer
         overrideRowRenderer={this.stickyRowRenderer}
@@ -338,7 +331,7 @@ class FlashList<T> extends React.PureComponent<
           renderItemContainer={this.itemContainer}
           renderContentContainer={this.container}
           onEndReached={this.onEndReached}
-          onEndReachedThreshold={endDetectionThreshold || undefined}
+          onEndReachedThresholdRelative={onEndReachedThreshold || undefined}
           extendedState={this.state.extraData}
           layoutSize={estimatedListSize}
           maxRenderAhead={3 * finalDrawDistance}

yarn.lock

@@ -6673,10 +6673,10 @@ recast@^0.20.3:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
-recyclerlistview@3.1.0-beta.5:
-  version "3.1.0-beta.5"
-  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.5.tgz#ef379cc51f4e73d1ccae68b5b95f459b3d665a98"
-  integrity sha512-9s75KHbOxuSejAS76Th8tSW1youTHQXnJR+oI1rYoesaHqie3JdvQZww6akinydSAJ4s0SeMto2pTq1IiapYSQ==
+recyclerlistview@3.1.0-beta.6:
+  version "3.1.0-beta.6"
+  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.6.tgz#b92d2daae6d871efe7f500da1064a58175832516"
+  integrity sha512-qfhvhgDQYfQHC5FhNsiztpF7yeI7tD3Dj58xrlSOXrDSoUJVvctrtX2hmV0ytLkPdHCnGkSpr9HbeRK/rR29Gw==
   dependencies:
     lodash.debounce "4.0.8"
     prop-types "15.5.8"