The calculations for onViewableItemsChanged are incorrect if Flatlist has ListHeaderComponent #16612
Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS Sierra 10.12.6
Node: 6.9.4
Yarn: 0.19.1
npm: 3.10.10
Watchman: 4.7.0
Xcode: Xcode 9.0 Build version 9A235
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.5 => 0.49.5
Target Platform: iOS (10.3) (any though)
Steps to Reproduce
- Add a Flatlist component
- Add a
ListHeaderComponentof any length - use
onViewableItemsChangedto track viewable rows in local state - That's it, the calculations will be off by the header height.
Expected Behavior
onViewableItemsChanged fires at the correct time
(Write what you thought would happen.)
Actual Behavior
calculations for onViewableItemsChanged are always off by the length of the header.
(Write what happened. Add screenshots!)
Reproducible Demo
- Example repo: https://github.com/shakyShane/flatlist-bug (from react-native init, it's a single file)
- Snack https://snack.expo.io/HJz_uaS0b
- gif
Flatlist Bug with ListHeaderComponent
Flatlist exposes onViewableItemsChanged - which can be used to determine which elements are currently
visible within a list. This works correctly.
If a ListHeaderComponent is also given, the calculations used for determining which items are in view
will be incorrect - by exactly the height of the header.
in Libraries/Lists/VirtualizedList.js, this._headerLength is initialised as 0 and then updated on render
to store the length of the header dynamically, but then this value is not used anywhere else.
Calculations need to account for the 'length' of the Header component
We found the easiest way was to subtract the this._headerLength from the offset calculation, such as
_selectOffset(metrics: {x: number, y: number}): number {
- return !this.props.horizontal ? metrics.y : metrics.x;
+ return (!this.props.horizontal ? metrics.y : metrics.x) - this._headerLength;
}