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;