Per-child interceptor only with sticky header

Author: m-bert

packages/react-native-gesture-handler/src/v3/components/GestureComponents.tsx

@@ -21,7 +21,7 @@ import { GestureDetectorType } from '../detectors';
 import type { NativeGesture } from '../hooks/gestures/native/NativeTypes';
 import { NativeWrapperProps } from '../hooks/utils';
 import type { NativeWrapperProperties } from '../types/NativeWrapperType';
-import {
+import ScrollViewResponderInterceptor, {
   interceptScrollViewChildren,
   ScrollViewResponderProvider,
 } from './ScrollViewResponderInterceptor';
@@ -81,27 +81,56 @@ export const ScrollView = (
     });
   };
 
-  return (
+  // ScrollView resolves `stickyHeaderIndices` against its direct children, so
+  // the single responder interceptor would collapse the
+  // content into one child and pin all of it when index 0 is sticky.
+  // ScrollViews using sticky headers move the responder context above the
+  // ScrollView and leave the child count intact — with one logical responder
+  // per child in 'handled' mode.
+  const hasStickyHeaders =
+    Array.isArray(rest.stickyHeaderIndices) &&
+    rest.stickyHeaderIndices.length > 0;
+
+  const scrollView = (
+    <GHScrollView
+      {...rest}
+      ref={props.ref}
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER={updateGesture}
+      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
+      refreshControl={
+        refreshControl
+          ? React.cloneElement(
+              refreshControl,
+              // @ts-ignore block exists (on our RefreshControl)
+              scrollGesture ? { block: scrollGesture } : {}
+            )
+          : undefined
+      }>
+      {!hasStickyHeaders ? (
+        <ScrollViewResponderInterceptor
+          keyboardShouldPersistTaps={keyboardShouldPersistTaps}>
+          {children}
+        </ScrollViewResponderInterceptor>
+      ) : keyboardShouldPersistTaps === 'handled' ? (
+        interceptScrollViewChildren(children)
+      ) : (
+        children
+      )}
+    </GHScrollView>
+  );
+
+  // The provider is required even when no logical responders are rendered —
+  // Pressable and Touchable read its context (and its keyboard-visibility
+  // tracking) to suppress presses on keyboard-dismissing taps in 'never'
+  // mode. Only the responder wrappers are gated on 'handled'.
+  return hasStickyHeaders ? (
     <ScrollViewResponderProvider
       keyboardShouldPersistTaps={keyboardShouldPersistTaps}>
-      <GHScrollView
-        {...rest}
-        ref={props.ref}
-        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-        onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER={updateGesture}
-        // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
-        refreshControl={
-          refreshControl
-            ? React.cloneElement(
-                refreshControl,
-                // @ts-ignore block exists (on our RefreshControl)
-                scrollGesture ? { block: scrollGesture } : {}
-              )
-            : undefined
-        }>
-        {interceptScrollViewChildren(children)}
-      </GHScrollView>
+      {scrollView}
     </ScrollViewResponderProvider>
+  ) : (
+    scrollView
   );
 };
 

packages/react-native-gesture-handler/src/v3/components/ScrollViewResponderInterceptor.tsx

@@ -120,7 +120,7 @@ export const ScrollViewResponderProvider = ({
 // child consumes the marked event before ScrollView's own
 // keyboardShouldPersistTaps='handled' responder logic handles it.
 // For more context: https://github.com/software-mansion/react-native-gesture-handler/pull/4158#issuecomment-4431632964
-const LogicalResponderChild = ({ children }: PropsWithChildren) => {
+const LogicalResponder = ({ children }: PropsWithChildren) => {
   const jsResponderContext = use(JSResponderContext);
 
   const resetRNGHResponderEvent = useCallback(() => {
@@ -150,12 +150,30 @@ const LogicalResponderChild = ({ children }: PropsWithChildren) => {
   );
 };
 
+// Wraps the whole ScrollView content in a single logical responder
+const ScrollViewResponderInterceptor = ({
+  children,
+  keyboardShouldPersistTaps,
+}: ScrollViewResponderInterceptorProps) => {
+  return (
+    <ScrollViewResponderProvider
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}>
+      <LogicalResponder>{children}</LogicalResponder>
+    </ScrollViewResponderProvider>
+  );
+};
+
+// Wraps each ScrollView child in its own logical responder, keeping the child
+// count intact. Requires a `ScrollViewResponderProvider` above the ScrollView
 export function interceptScrollViewChildren(children: React.ReactNode) {
+  // Null and boolean children must be passed through untouched — ScrollView
+  // drops them in its own `React.Children.toArray` call, so wrapping them
+  // would shift the indices that `stickyHeaderIndices` refers to.
   return React.Children.map(children, (child) =>
     child == null || typeof child === 'boolean' ? (
       child
     ) : (
-      <LogicalResponderChild>{child}</LogicalResponderChild>
+      <LogicalResponder>{child}</LogicalResponder>
     )
   );
 }
@@ -165,3 +183,5 @@ const styles = StyleSheet.create({
     display: 'contents',
   },
 });
+
+export default ScrollViewResponderInterceptor;