From 75786c3f24a3b21cd648e9c3b850d82190608dac Mon Sep 17 00:00:00 2001
From: Elvira Burchik <elviraburchik@gmail.com>
Date: Thu, 10 Mar 2022 15:19:48 +0100
Subject: [PATCH] Add a new prop - onEndReachedThresholdRelative (#695)

* Add a new prop - onEndReachedThresholdRelative

* Update after PR comments

* - Fix lint issues
- Update new prop description in readme

* Update RecyclerListView.tsx

Co-authored-by: Talha Naqvi <naqvitalha@gmail.com>
---
 README.md                     |  1 +
 src/core/RecyclerListView.tsx | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a141d2a..3b90aa36 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,7 @@ In case you cannot determine heights of items in advance just set `forceNonDeter
 | externalScrollView | No | { new (props: ScrollViewDefaultProps): BaseScrollView } | Use this to pass your on implementation of BaseScrollView |
 | onEndReached | No | () => void | Callback function executed when the end of the view is hit (minus onEndThreshold if defined) |
 | onEndReachedThreshold | No | number | Specify how many pixels in advance for the onEndReached callback |
+| onEndReachedThresholdRelative | No | number | Specify how far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback |
 | onVisibleIndicesChanged | No | TOnItemStatusChanged | Provides visible index; helpful in sending impression events |
 | onVisibleIndexesChanged | No | TOnItemStatusChanged | (Deprecated in 2.0 beta) Provides visible index; helpful in sending impression events |
 | renderFooter | No | () => JSX.Element \| JSX.Element[] \| null | Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads |
diff --git a/src/core/RecyclerListView.tsx b/src/core/RecyclerListView.tsx
index ec133b7e..32c965de 100644
--- a/src/core/RecyclerListView.tsx
+++ b/src/core/RecyclerListView.tsx
@@ -87,6 +87,7 @@ export interface RecyclerListViewProps {
     onRecreate?: (params: OnRecreateParams) => void;
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
+    onEndReachedThresholdRelative?: number;
     onVisibleIndexesChanged?: TOnItemStatusChanged;
     onVisibleIndicesChanged?: TOnItemStatusChanged;
     renderFooter?: () => JSX.Element | JSX.Element[] | null;
@@ -126,6 +127,7 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
         initialRenderIndex: 0,
         isHorizontal: false,
         onEndReachedThreshold: 0,
+        onEndReachedThresholdRelative: 0,
         renderAheadOffset: IS_WEB ? 1000 : 250,
     };
 
@@ -712,7 +714,13 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
             if (viewabilityTracker) {
                 const windowBound = this.props.isHorizontal ? layout.width - this._layout.width : layout.height - this._layout.height;
                 const lastOffset = viewabilityTracker ? viewabilityTracker.getLastOffset() : 0;
-                if (windowBound - lastOffset <= Default.value<number>(this.props.onEndReachedThreshold, 0)) {
+                const threshold = windowBound - lastOffset;
+
+                const listLength = this.props.isHorizontal ? this._layout.width : this._layout.height;
+                const triggerOnEndThresholdRelative = listLength * Default.value<number>(this.props.onEndReachedThresholdRelative, 0);
+                const triggerOnEndThreshold = Default.value<number>(this.props.onEndReachedThreshold, 0);
+
+                if (threshold <= triggerOnEndThresholdRelative || threshold <= triggerOnEndThreshold) {
                     if (this.props.onEndReached && !this._onEndReachedCalled) {
                         this._onEndReachedCalled = true;
                         this.props.onEndReached();
@@ -767,6 +775,10 @@ RecyclerListView.propTypes = {
     //Specify how many pixels in advance you onEndReached callback
     onEndReachedThreshold: PropTypes.number,
 
+    //Specify how far from the end (in units of visible length of the list)
+    //the bottom edge of the list must be from the end of the content to trigger the onEndReached callback
+    onEndReachedThresholdRelative: PropTypes.number,
+
     //Deprecated. Please use onVisibleIndicesChanged instead.
     onVisibleIndexesChanged: PropTypes.func,