Skip to content

Commit

Permalink
workaround scrollToEnd issues for inverted flatlist
Browse files Browse the repository at this point in the history
addresses issues explained in facebook#30373 (comment)

handles cases when adding new item to inverted flatlist (flatlist has to
scroll up to the new item)

test cases
facebook#30373 (comment)
  • Loading branch information
fabOnReact committed Jul 8, 2022
1 parent f72cac2 commit e53aa54
Showing 1 changed file with 27 additions and 20 deletions.
47 changes: 27 additions & 20 deletions Libraries/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -388,14 +388,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const animated = params ? params.animated : true;
const veryLast = this.props.getItemCount(this.props.data) - 1;
const frame = this.__getFrameMetricsApprox(veryLast);
console.log('TESTING::VirtualizedList scrollToEnd');
console.log('TESTING::VirtualizedList frame', frame);
const offsetCalculation =
const offset = Math.max(
0,
frame.offset +
frame.length +
this._footerLength -
this._scrollMetrics.visibleLength;
const offset = Math.max(0, offsetCalculation);
frame.length +
this._footerLength -
this._scrollMetrics.visibleLength,
);

if (this._scrollRef == null) {
return;
Expand Down Expand Up @@ -752,17 +751,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
parentDebugInfo: this.context.debugInfo,
});
}
if (this.props.inverted) {
console.log('');
// this.scrollToEnd({animated: false});
// const veryLast = this.props.getItemCount(this.props.data) - 1;
const veryLast = 4;
const frame = this.__getFrameMetricsApprox(veryLast);
this.scrollToOffset({offset: frame.offset, animated: true});
console.log('TESTING::VirtualizedList veryLast', veryLast);
console.log('TESTING::VirtualizedList frame', frame);
// this.scrollToOffset({offset: 310, animated: true});
}
}

componentWillUnmount() {
Expand Down Expand Up @@ -965,7 +953,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
0,
lastInitialIndex,
);
// this.scrollToOffset({offset: 0, animated: false});
}
const firstAfterInitial = Math.max(lastInitialIndex + 1, first);
if (!isVirtualizationDisabled && first > lastInitialIndex + 1) {
Expand Down Expand Up @@ -1028,7 +1015,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
0,
lastInitialIndex,
);
// this.scrollToOffset({offset: 1300, animated: true});
}
if (!this._hasWarned.keys && _usedIndexForKey) {
console.warn(
Expand Down Expand Up @@ -1589,6 +1575,27 @@ class VirtualizedList extends React.PureComponent<Props, State> {
this.props.onContentSizeChange(width, height);
}
this._scrollMetrics.contentLength = this._selectLength({height, width});
if (
this._hasTriggeredInitialScrollToIndex &&
this.props.initialScrollIndex == null &&
this.props.inverted
) {
this.scrollToOffset({
animated: false,
offset: 0,
});
}
if (
!this._hasTriggeredInitialScrollToIndex &&
this.props.initialScrollIndex == null &&
this.props.inverted
) {
this.scrollToOffset({
animated: false,
offset: this._scrollMetrics.contentLength,
});
this._hasTriggeredInitialScrollToIndex = true;
}
this._scheduleCellsToRenderUpdate();
this._maybeCallOnEndReached();
};
Expand Down

0 comments on commit e53aa54

Please sign in to comment.