diff --git a/src/MasonryList.js b/src/MasonryList.js index 5c7622e..ed08279 100644 --- a/src/MasonryList.js +++ b/src/MasonryList.js @@ -81,7 +81,7 @@ type State = { }; // This will get cloned and added a bunch of props that are supposed to be on -// ScrollView so we wan't to make sure we don't pass them over (especially +// ScrollView so we want to make sure we don't pass them over (especially // onLayout since it exists on both). class FakeScrollView extends React.Component<{ style?: any, children?: any }> { render() { @@ -118,7 +118,7 @@ export default class MasonryList extends React.Component { state = _stateFromProps(this.props); _listRefs: Array = []; _scrollRef: ?ScrollView; - _endsReached = 0; + _endReached = false; componentWillReceiveProps(newProps: Props) { this.setState(_stateFromProps(newProps)); @@ -196,6 +196,26 @@ export default class MasonryList extends React.Component { ); }; + /** + * Temporary workaround for onEndReached getting called by each column + */ + _onEndReached = event => { + if (this._endReached) { + return; + } + + this._endReached = true; + + if (this.props.onEndReached) { + this.props.onEndReached(event); + } + + // small lag to avoid _onEndReached getting called by multiple columns + setTimeout(() => { + this._endReached = false; + }, 200); + }; + _getItemLayout = (columnIndex, rowIndex) => { const column = this.state.columns[columnIndex]; let offset = 0; @@ -242,7 +262,7 @@ export default class MasonryList extends React.Component { renderItem({ item, index, column: col.index })} renderScrollComponent={this._renderScrollComponent} keyExtractor={keyExtractor} - onEndReached={onEndReached} + onEndReached={this._onEndReached} onEndReachedThreshold={this.props.onEndReachedThreshold} removeClippedSubviews={false} />,