feat: add on end reached event

Ref: #4

docs/Props.md

@@ -257,6 +257,26 @@ The amount by which the scroll view content is inset from the edges of the scrol
 | ------------------------------------------------------------------ | -------- | ------------------------------------------ |
 | object: {top: number, left: number, bottom: number, right: number} | No       | `{ top: 0, right: 0, left: 0, bottom: 0 }` |
 
+### `onEndReached`
+
+```ts
+onEndReached(info: {distanceFromEnd: number})
+```
+
+| Type     | Required |
+| -------- | -------- |
+| function | No       |
+
+Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content.
+
+### `onEndReachedThreshold`
+
+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. Thus a value of `0.5` will trigger onEndReached when the end of the content is within half the visible length of the list.
+
+| Type   | Required | Default |
+| ------ | -------- | ------- |
+| number | No       | `0`     |
+
 ## <a name="flatlist"></a> FlatList compatibility
 
 > These are **compatibility** props for a faster FlatList replacement and all these props have an alias.<br>

lib/BigList.jsx

@@ -367,10 +367,21 @@ class BigList extends PureComponent {
     ) {
       this.setState(nextState);
     }
-    const { onScroll } = this.props;
+    const { onScroll, onEndReached, onEndReachedThreshold } = this.props;
     if (onScroll != null) {
       onScroll(event);
     }
+    const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+    const distanceFromEnd =
+      contentSize.height - (layoutMeasurement.height + contentOffset.y);
+    if (distanceFromEnd <= layoutMeasurement.height * onEndReachedThreshold) {
+      if (!this.endReached) {
+        this.endReached = true;
+        onEndReached && onEndReached({ distanceFromEnd });
+      }
+    } else {
+      this.endReached = false;
+    }
   }
 
   /**
@@ -759,6 +770,8 @@ BigList.propTypes = {
     PropTypes.object,
     PropTypes.array,
   ]),
+  onEndReached: PropTypes.func,
+  onEndReachedThreshold: PropTypes.number,
   onLayout: PropTypes.func,
   onScroll: PropTypes.func,
   onScrollEnd: PropTypes.func,
@@ -814,6 +827,7 @@ BigList.defaultProps = {
   insetTop: 0,
   insetBottom: 0,
   contentInset: { top: 0, right: 0, left: 0, bottom: 0 },
+  onEndReachedThreshold: 0,
 };
 
 export default BigList;

lib/BigListProcessor.js

@@ -71,7 +71,7 @@ export default class BigListProcessor {
    * Get section height.
    * @returns {number|*}
    */
-  getsectionHeaderHeight(section) {
+  getSectionHeaderHeight(section) {
     const { sectionHeaderHeight } = this;
     return isNumeric(sectionHeaderHeight)
       ? Number(sectionHeaderHeight)
@@ -165,7 +165,7 @@ export default class BigListProcessor {
       if (rows === 0) {
         continue;
       }
-      const sectionHeaderHeight = this.getsectionHeaderHeight(section);
+      const sectionHeaderHeight = this.getSectionHeaderHeight(section);
       position = height;
       height += sectionHeaderHeight;
       if (
@@ -290,7 +290,7 @@ export default class BigListProcessor {
         section += 1;
         continue;
       }
-      scrollTop += this.getsectionHeaderHeight(section);
+      scrollTop += this.getSectionHeaderHeight(section);
       if (this.uniform) {
         const uniformHeight = this.getItemHeight(section);
         if (section === targetSection) {
@@ -319,7 +319,7 @@ export default class BigListProcessor {
     }
     this.scrollView.scrollTo({
       x: 0,
-      y: Math.max(0, scrollTop - this.getsectionHeaderHeight(targetSection)),
+      y: Math.max(0, scrollTop - this.getSectionHeaderHeight(targetSection)),
       animated,
     });
     return true;

lib/index.d.ts

@@ -1,11 +1,11 @@
 import React, { PureComponent } from "react";
 import {
   Animated,
+  LayoutChangeEvent,
+  ListRenderItem,
   NativeScrollEvent,
   NativeSyntheticEvent,
   ScrollViewProps,
-  LayoutChangeEvent,
-  ListRenderItem,
   ViewStyle,
 } from "react-native";
 
@@ -34,6 +34,8 @@ interface BigListProps<ItemT> extends ScrollViewProps {
   ListFooterComponentStyle?: ViewStyle | ViewStyle[];
   ListHeaderComponent?: React.ReactNode;
   ListHeaderComponentStyle?: ViewStyle | ViewStyle[];
+  onEndReached?: ((info: { distanceFromEnd: number }) => void) | null;
+  onEndReachedThreshold?: number | null;
   onLayout?: (event: LayoutChangeEvent) => void;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;