fix: unexpected jumping of list while using sticky headers

packages/react-native/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -12,6 +12,7 @@ import {Constructor} from '../../../types/private/Utilities';
 import {Insets} from '../../../types/public/Insets';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {LayoutChangeEvent} from '../../Types/CoreEventTypes';
 import {
   NativeSyntheticEvent,
   NativeTouchEvent,
@@ -29,6 +30,14 @@ export interface PointProp {
 export interface ScrollResponderEvent
   extends NativeSyntheticEvent<NativeTouchEvent> {}
 
+export type StickyHeaderOnLayoutEventContext<
+  T extends Record<string, unknown>,
+> = {
+  index: number;
+  key: string;
+  itemProps: T;
+};
+
 interface SubscribableMixin {
   /**
    * Special form of calling `addListener` that *guarantees* that a
@@ -661,6 +670,13 @@ export interface ScrollViewProps
    */
   onContentSizeChange?: ((w: number, h: number) => void) | undefined;
 
+  onStickyHeaderLayout?:
+    | ((
+        event: LayoutChangeEvent,
+        context: StickyHeaderOnLayoutEventContext<Record<string, unknown>>,
+      ) => void)
+    | undefined;
+
   /**
    * Fires at most once per frame during scrolling.
    */

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -371,6 +371,12 @@ type StickyHeaderComponentType = component(
   ...ScrollViewStickyHeaderProps
 );
 
+export type StickyHeaderOnLayoutEventContext<T: {...} = {...}> = $ReadOnly<{
+  index: number,
+  key: React.Key,
+  itemProps: T,
+}>;
+
 export type ScrollViewProps = $ReadOnly<{
   ...ViewProps,
   ...ScrollViewPropsIOS,
@@ -530,6 +536,10 @@ export type ScrollViewProps = $ReadOnly<{
    * which this ScrollView renders.
    */
   onContentSizeChange?: (contentWidth: number, contentHeight: number) => void,
+  onStickyHeaderLayout?: (
+    event: LayoutChangeEvent,
+    context: StickyHeaderOnLayoutEventContext<{...}>,
+  ) => void,
   onKeyboardDidShow?: (event: KeyboardEvent) => void,
   onKeyboardDidHide?: (event: KeyboardEvent) => void,
   onKeyboardWillShow?: (event: KeyboardEvent) => void,
@@ -1120,11 +1130,19 @@ class ScrollView extends React.Component<ScrollViewProps, State> {
       return;
     }
 
+    this.props.onStickyHeaderLayout &&
+      this.props.onStickyHeaderLayout(event, {
+        key,
+        index,
+        itemProps: childArray[index].props,
+      });
+
     const layoutY = event.nativeEvent.layout.y;
     this._headerLayoutYs.set(key, layoutY);
 
     const indexOfIndex = stickyHeaderIndices.indexOf(index);
     const previousHeaderIndex = stickyHeaderIndices[indexOfIndex - 1];
+
     if (previousHeaderIndex != null) {
       const previousHeader = this._stickyHeaderRefs.get(
         this._getKeyForIndex(previousHeaderIndex, childArray),

packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap

@@ -21,6 +21,7 @@ exports[`FlatList ignores invalid data 1`] = `
   onScrollShouldSetResponder={[Function]}
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
+  onStickyHeaderLayout={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
@@ -96,6 +97,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   refreshControl={
     <RefreshControlMock
       onRefresh={[MockFunction]}
@@ -216,6 +218,7 @@ exports[`FlatList renders array-like data 1`] = `
   onScrollShouldSetResponder={[Function]}
   onStartShouldSetResponder={[Function]}
   onStartShouldSetResponderCapture={[Function]}
+  onStickyHeaderLayout={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
   onTouchMove={[Function]}
@@ -295,6 +298,7 @@ exports[`FlatList renders empty list 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
@@ -317,6 +321,7 @@ exports[`FlatList renders null list 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
@@ -352,6 +357,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
@@ -425,6 +431,7 @@ exports[`FlatList renders simple list 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
@@ -489,6 +496,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={Array []}
@@ -562,6 +570,7 @@ exports[`FlatList renders simple list using ListItemComponent 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   removeClippedSubviews={false}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={Array []}

packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap

@@ -27,6 +27,7 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={
@@ -38,7 +39,6 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
   <View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     />
     <View
@@ -88,6 +88,7 @@ exports[`SectionList renders a footer when there is no data 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={
@@ -99,7 +100,6 @@ exports[`SectionList renders a footer when there is no data 1`] = `
   <View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     >
       <sectionHeader
@@ -139,6 +139,7 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={
@@ -150,7 +151,6 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
   <View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     />
     <View
@@ -223,6 +223,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   refreshControl={
     <RefreshControlMock
       onRefresh={[MockFunction]}
@@ -252,7 +253,6 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     </View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     >
       <sectionHeader
@@ -297,7 +297,6 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     </View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     >
       <sectionHeader
@@ -342,7 +341,6 @@ exports[`SectionList renders all the bells and whistles 1`] = `
     </View>
     <View
       onFocusCapture={[Function]}
-      onLayout={[Function]}
       style={null}
     >
       <sectionHeader
@@ -409,6 +407,7 @@ exports[`SectionList renders empty list 1`] = `
   onScroll={[Function]}
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
+  onStickyHeaderLayout={[Function]}
   renderItem={[Function]}
   scrollEventThrottle={0.0001}
   stickyHeaderIndices={Array []}

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -1869,6 +1869,11 @@ type StickyHeaderComponentType = component(
   >,
   ...ScrollViewStickyHeaderProps
 );
+export type StickyHeaderOnLayoutEventContext<T: { ... } = { ... }> = $ReadOnly<{
+  index: number,
+  key: React.Key,
+  itemProps: T,
+}>;
 export type ScrollViewProps = $ReadOnly<{
   ...ViewProps,
   ...ScrollViewPropsIOS,
@@ -1892,6 +1897,10 @@ export type ScrollViewProps = $ReadOnly<{
   onScrollBeginDrag?: ?(event: ScrollEvent) => void,
   onScrollEndDrag?: ?(event: ScrollEvent) => void,
   onContentSizeChange?: (contentWidth: number, contentHeight: number) => void,
+  onStickyHeaderLayout?: (
+    event: LayoutChangeEvent,
+    context: StickyHeaderOnLayoutEventContext<{ ... }>
+  ) => void,
   onKeyboardDidShow?: (event: KeyboardEvent) => void,
   onKeyboardDidHide?: (event: KeyboardEvent) => void,
   onKeyboardWillShow?: (event: KeyboardEvent) => void,

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -10,14 +10,18 @@
 
 import type {CellMetricProps, ListOrientation} from './ListMetricsAggregator';
 import type {ViewToken} from './ViewabilityHelper';
+import type {Props as CellRendererProps} from './VirtualizedListCellRenderer';
 import type {
   Item,
-  VirtualizedListProps,
-  ListRenderItemInfo,
   ListRenderItem,
+  ListRenderItemInfo,
   Separators,
+  VirtualizedListProps,
 } from './VirtualizedListProps';
-import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
+import type {
+  ScrollResponderType,
+  StickyHeaderOnLayoutEventContext,
+} from 'react-native/Libraries/Components/ScrollView/ScrollView';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   LayoutChangeEvent,
@@ -791,9 +795,9 @@ class VirtualizedList extends StateSafePureComponent<
     for (let ii = first; ii <= last; ii++) {
       const item = getItem(data, ii);
       const key = VirtualizedList._keyExtractor(item, ii, this.props);
-
+      const isSticky = stickyIndicesFromProps.has(ii + stickyOffset);
       this._indicesToKeys.set(ii, key);
-      if (stickyIndicesFromProps.has(ii + stickyOffset)) {
+      if (isSticky) {
         stickyHeaderIndices.push(cells.length);
       }
 
@@ -819,9 +823,10 @@ class VirtualizedList extends StateSafePureComponent<
             this._cellRefs[key] = ref;
           }}
           renderItem={renderItem}
-          {...(shouldListenForLayout && {
-            onCellLayout: this._onCellLayout,
-          })}
+          {...(shouldListenForLayout &&
+            !isSticky && {
+              onCellLayout: this._onCellLayout,
+            })}
         />,
       );
       prevCellKey = key;
@@ -1072,6 +1077,7 @@ class VirtualizedList extends StateSafePureComponent<
       ...this.props,
       onContentSizeChange: this._onContentSizeChange,
       onLayout: this._onLayout,
+      onStickyHeaderLayout: this._onStickyHeaderLayout,
       onScroll: this._onScroll,
       onScrollBeginDrag: this._onScrollBeginDrag,
       onScrollEndDrag: this._onScrollEndDrag,
@@ -1394,6 +1400,19 @@ class VirtualizedList extends StateSafePureComponent<
     this._maybeCallOnEdgeReached();
   };
 
+  _onStickyHeaderLayout = (
+    e: LayoutChangeEvent,
+    {
+      key: _key,
+      index: _index,
+      itemProps,
+    }: StickyHeaderOnLayoutEventContext<CellRendererProps<{...}>>,
+  ) => {
+    // Key and index provided in event are relative to current window.
+    const {index: cellIndex, cellKey} = itemProps;
+    this._onCellLayout(e, cellKey, cellIndex);
+  };
+
   _onLayoutEmpty = (e: LayoutChangeEvent) => {
     this.props.onLayout && this.props.onLayout(e);
   };