diff --git a/docs/Props.md b/docs/Props.md
index 825ff10..7fd5582 100644
--- 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` |
+
## FlatList compatibility
> These are **compatibility** props for a faster FlatList replacement and all these props have an alias.
diff --git a/lib/BigList.jsx b/lib/BigList.jsx
index c3cc1fb..59889e2 100644
--- 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
index b83ce9e..0867823 100644
--- a/lib/index.d.ts
+++ b/lib/index.d.ts
@@ -11,6 +11,7 @@ import {
interface BigListProps extends ScrollViewProps {
actionSheetScrollRef?: unknown;
+ batchSizeThreshold?: number | null | unknown;
contentInset?: {
bottom?: number;
left?: number;
diff --git a/lib/utils.js b/lib/utils.js
index 548caa3..c97f1fa 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -13,9 +13,14 @@ 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,
@@ -23,7 +28,7 @@ export const processBlock = (containerHeight, scrollTop) => {
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;