feat: add batch size threshold

marcocesarato · Jun 11, 2021 · 988fa0f · 988fa0f
1 parent e4c20c0
commit 988fa0f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/docs/Props.md b/docs/Props.md
@@ -293,6 +293,18 @@ How far from the end (in units of visible length of the list) the bottom edge of
 | ------ | -------- | ------- |
 | number | No       | `0`     |
 
+### `batchSizeThreshold`
+
+How much threshold must be applied to the batch size to render the elements before rendering the other batch of elements. Thus a value of `0.5` will make the batch size equal to half the visible length of the list (above and below from the current position of the batch).
+
+**A lower value of this prop improve performance and memory usage.**
+
+Minimum value limited to `0.5` to display all elements on the visible list with no gaps.
+
+| Type   | Required | Default |
+| ------ | -------- | ------- |
+| number | No       | `1`    |
+
 ## <a name="flatlist"></a> FlatList compatibility
 
 > These are **compatibility** props for a faster FlatList replacement and all these props have an alias.<br>

diff --git a/lib/BigList.jsx b/lib/BigList.jsx
@@ -32,6 +32,7 @@ class BigList extends PureComponent {
   /**
    * Get list state.
    * @param data
+   * @param batchSizeThreshold
    * @param headerHeight
    * @param footerHeight
    * @param sectionHeaderHeight
@@ -50,6 +51,7 @@ class BigList extends PureComponent {
   static getListState(
     {
       data,
+      batchSizeThreshold,
       headerHeight,
       footerHeight,
       sectionHeaderHeight,
@@ -105,9 +107,15 @@ class BigList extends PureComponent {
    * @return {{blockStart: *, batchSize: *, blockEnd: *, items: *[], height: *}|{blockStart, batchSize, blockEnd, items: *[], height: *}}
    */
   getListState(props, options) {
+    const stateProps = props || this.props;
     return this.constructor.getListState(
-      props || this.props,
-      options || processBlock(this.containerHeight, this.scrollTop),
+      stateProps,
+      options ||
+        processBlock({
+          containerHeight: this.containerHeight,
+          scrollTop: this.scrollTop,
+          batchSizeThreshold: stateProps.batchSizeThreshold,
+        }),
     );
   }
 
@@ -356,7 +364,7 @@ class BigList extends PureComponent {
    */
   onScroll(event) {
     const { nativeEvent } = event;
-    const { contentInset } = this.props;
+    const { contentInset, batchSizeThreshold } = this.props;
     this.containerHeight =
       nativeEvent.layoutMeasurement.height -
       (contentInset.top || 0) -
@@ -365,7 +373,11 @@ class BigList extends PureComponent {
       Math.max(0, nativeEvent.contentOffset.y),
       nativeEvent.contentSize.height - this.containerHeight,
     );
-    const nextState = processBlock(this.containerHeight, this.scrollTop);
+    const nextState = processBlock({
+      containerHeight: this.containerHeight,
+      scrollTop: this.scrollTop,
+      batchSizeThreshold,
+    });
     if (
       nextState.batchSize !== this.state.batchSize ||
       nextState.blockStart !== this.state.blockStart ||
@@ -396,12 +408,16 @@ class BigList extends PureComponent {
    */
   onLayout(event) {
     const { nativeEvent } = event;
-    const { contentInset } = this.props;
+    const { contentInset, batchSizeThreshold } = this.props;
     this.containerHeight =
       nativeEvent.layout.height -
       (contentInset.top || 0) -
       (contentInset.bottom || 0);
-    const nextState = processBlock(this.containerHeight, this.scrollTop);
+    const nextState = processBlock({
+      containerHeight: this.containerHeight,
+      scrollTop: this.scrollTop,
+      batchSizeThreshold,
+    });
     if (
       nextState.batchSize !== this.state.batchSize ||
       nextState.blockStart !== this.state.blockStart ||
@@ -740,6 +756,7 @@ class BigList extends PureComponent {
 
 BigList.propTypes = {
   actionSheetScrollRef: PropTypes.any,
+  batchSizeThreshold: PropTypes.number,
   bottom: PropTypes.number,
   contentInset: PropTypes.shape({
     bottom: PropTypes.number,
@@ -828,6 +845,7 @@ BigList.defaultProps = {
   data: [],
   sections: null,
   refreshing: false,
+  batchSizeThreshold: 1,
   // Renders
   renderItem: () => null,
   renderHeader: () => null,

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -11,6 +11,7 @@ import {
 
 interface BigListProps<ItemT> extends ScrollViewProps {
   actionSheetScrollRef?: unknown;
+  batchSizeThreshold?: number | null | unknown;
   contentInset?: {
     bottom?: number;
     left?: number;

diff --git a/lib/utils.js b/lib/utils.js
@@ -13,17 +13,22 @@ export const isNumeric = (num) => {
  * Process block.
  * @param containerHeight
  * @param scrollTop
+ * @param batchSizeThreshold
  * @returns {{blockStart: number, batchSize: number, blockEnd: number}}
  */
-export const processBlock = (containerHeight, scrollTop) => {
+export const processBlock = ({
+  containerHeight,
+  scrollTop,
+  batchSizeThreshold = 1,
+}) => {
   if (containerHeight === 0) {
     return {
       batchSize: 0,
       blockStart: 0,
       blockEnd: 0,
     };
   }
-  const batchSize = containerHeight;
+  const batchSize = containerHeight * Math.max(0.5, batchSizeThreshold);
   const blockNumber = Math.ceil(scrollTop / batchSize);
   const blockStart = batchSize * blockNumber;
   const blockEnd = blockStart + batchSize;