Repository navigation
Use the sticky wrapper's layout for sticky header cells (#59199) - #59199
Open
ramya-2196 wants to merge 1 commit into
Open
ramya-2196 wants to merge 1 commit into
ramya-2196 wants to merge 1 commit into
Conversation
|
@ramya-2196 has exported this pull request. If you are a Meta employee, you can view the originating Diff in D126073361. |
Summary: ### What `VirtualizedList` now records the position of a sticky header cell from its sticky wrapper, instead of from the cell's own layout. This affects `FlatList` with `stickyHeaderIndices` and `SectionList` with sticky section headers. JS only; no new props or public API. - `VirtualizedList.js`: sticky cells get an `onLayout` callback, and that layout takes priority over the cell's own `onCellLayout` measurement. - `VirtualizedListCellRenderer.js`: adds the optional `onLayout` prop type. - `VirtualizedList.macos.js`, `VirtualizedList.windows.js`, `VirtualizedListCellRenderer.macos.js`: the same change. ### Why Fixes part of react#37439. With sticky headers, `onViewableItemsChanged` never reports the next sticky header or any item after it, even when they are fully on screen. `ScrollView` wraps every sticky child in `ScrollViewStickyHeader`. The cell's inner `View` therefore measures its layout relative to that wrapper, so a sticky cell's offset is always about 0 instead of its position in the list. Viewability scans cells in order and stops at the first cell that is not visible after a visible one. A sticky header stored at offset 0 looks scrolled off the top, so the scan stops there and drops it and everything after it. Example: groups of one 50px header and five 80px rows, scrolled to y=254 with header A pinned. Header B (at 450) and B1-B4 are on screen, but only `A4, A5` are reported. ### How `ScrollViewStickyHeader` already calls the child element's `onLayout` with the wrapper's layout, which is relative to the list content. Since cells moved their layout callback to `onCellLayout`, nothing received it. `VirtualizedList` now passes `onLayout` to sticky cells and records that layout. The cell's own measurement is still recorded until the wrapper reports, so a custom `StickyHeaderComponent` that does not forward `onLayout` behaves exactly as before. Once the wrapper has reported, later inner measurements for that cell are ignored. The flag is cleared when the cell unmounts or stops being sticky. Alternative considered: changing `ScrollViewStickyHeader` to forward `onCellLayout` as well. Rejected because it would teach `ScrollView` about a list-specific prop. ### For Reviewers - This does not fix the other half of react#37439: items hidden behind the pinned header are still reported as viewable. That needs a separate change in `ViewabilityHelper`. - Sticky cell offsets also feed render windowing, `scrollToIndex`, and fill-rate tracking, so those now use the correct positions too. Changelog: [General][Fixed] - Fix `onViewableItemsChanged` skipping the next sticky header and the items after it in `FlatList` and `SectionList` Differential Revision: D126073361
ramya-2196
force-pushed
the
export-D126073361
branch
from
October 19, 2026 16:15
19fbd04 to
3884903
Compare
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
What
VirtualizedListnow records the position of a sticky header cell from its sticky wrapper, instead of from the cell's own layout. This affectsFlatListwithstickyHeaderIndicesandSectionListwith sticky section headers. JS only; no new props or public API.VirtualizedList.js: sticky cells get anonLayoutcallback, and that layout takes priority over the cell's ownonCellLayoutmeasurement.VirtualizedListCellRenderer.js: adds the optionalonLayoutprop type.VirtualizedList.macos.js,VirtualizedList.windows.js,VirtualizedListCellRenderer.macos.js: the same change.Why
Fixes part of #37439. With sticky headers,
onViewableItemsChangednever reports the next sticky header or any item after it, even when they are fully on screen.ScrollViewwraps every sticky child inScrollViewStickyHeader. The cell's innerViewtherefore measures its layout relative to that wrapper, so a sticky cell's offset is always about 0 instead of its position in the list. Viewability scans cells in order and stops at the first cell that is not visible after a visible one. A sticky header stored at offset 0 looks scrolled off the top, so the scan stops there and drops it and everything after it.Example: groups of one 50px header and five 80px rows, scrolled to y=254 with header A pinned. Header B (at 450) and B1-B4 are on screen, but only
A4, A5are reported.How
ScrollViewStickyHeaderalready calls the child element'sonLayoutwith the wrapper's layout, which is relative to the list content. Since cells moved their layout callback toonCellLayout, nothing received it.VirtualizedListnow passesonLayoutto sticky cells and records that layout.The cell's own measurement is still recorded until the wrapper reports, so a custom
StickyHeaderComponentthat does not forwardonLayoutbehaves exactly as before. Once the wrapper has reported, later inner measurements for that cell are ignored. The flag is cleared when the cell unmounts or stops being sticky.Alternative considered: changing
ScrollViewStickyHeaderto forwardonCellLayoutas well. Rejected because it would teachScrollViewabout a list-specific prop.For Reviewers
ViewabilityHelper.scrollToIndex, and fill-rate tracking, so those now use the correct positions too.Changelog:
[General][Fixed] - Fix
onViewableItemsChangedskipping the next sticky header and the items after it inFlatListandSectionListDifferential Revision: D126073361