Wrap children

Author: m-bert

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

@@ -21,7 +21,10 @@ import { GestureDetectorType } from '../detectors';
 import type { NativeGesture } from '../hooks/gestures/native/NativeTypes';
 import { NativeWrapperProps } from '../hooks/utils';
 import type { NativeWrapperProperties } from '../types/NativeWrapperType';
-import ScrollViewResponderInterceptor from './ScrollViewResponderInterceptor';
+import {
+  interceptScrollViewChildren,
+  ScrollViewResponderProvider,
+} from './ScrollViewResponderInterceptor';
 
 export const RefreshControl: React.ComponentType<
   RNRefreshControlProps &
@@ -79,26 +82,26 @@ export const ScrollView = (
   };
 
   return (
-    <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
-      }>
-      <ScrollViewResponderInterceptor
-        keyboardShouldPersistTaps={keyboardShouldPersistTaps}>
-        {children}
-      </ScrollViewResponderInterceptor>
-    </GHScrollView>
+    <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>
+    </ScrollViewResponderProvider>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { use, useCallback, useEffect, useMemo, useRef } from 'react';
 import type {
   EmitterSubscription,
   KeyboardEvent,
@@ -95,7 +95,7 @@ type ScrollViewResponderInterceptorProps = PropsWithChildren<{
   keyboardShouldPersistTaps?: RNScrollViewProps['keyboardShouldPersistTaps'];
 }>;
 
-const ScrollViewResponderInterceptor = ({
+export const ScrollViewResponderProvider = ({
   children,
   keyboardShouldPersistTaps,
 }: ScrollViewResponderInterceptorProps) => {
@@ -110,44 +110,53 @@ const ScrollViewResponderInterceptor = ({
     return () => unsubscribeFromKeyboardVisibility();
   }, []);
 
+  return (
+    <JSResponderContext value={contextValue}>{children}</JSResponderContext>
+  );
+};
+
+const LogicalResponderChild = ({ children }: PropsWithChildren) => {
+  const jsResponderContext = use(JSResponderContext);
+
   const resetRNGHResponderEvent = useCallback(() => {
-    isRNGHResponderEvent.current = false;
+    updateResponderEventValue(jsResponderContext, false);
     return false;
-  }, []);
+  }, [jsResponderContext]);
 
   const handleStartShouldSetResponder = useCallback(() => {
     const shouldHandleRNGHEvent =
-      keyboardShouldPersistTaps === 'handled' && isRNGHResponderEvent.current;
+      jsResponderContext?.keyboardShouldPersistTaps === 'handled' &&
+      jsResponderContext.isRNGHResponderEvent.current;
 
-    isRNGHResponderEvent.current = false;
+    updateResponderEventValue(jsResponderContext, false);
 
     return shouldHandleRNGHEvent;
-  }, [keyboardShouldPersistTaps]);
-
-  // RNGH tap responders need to let RN components higher in the tree handle
-  // the JS responder event first. If no RN component claims it, this logical
-  // ScrollView child consumes the marked event before ScrollView's own
-  // keyboardShouldPersistTaps='handled' responder logic handles it.
-  // For more information check this comment:
-  // https://github.com/software-mansion/react-native-gesture-handler/pull/4158#issuecomment-4431632964
+  }, [jsResponderContext]);
+
   return (
-    <JSResponderContext value={contextValue}>
-      <View
-        collapsable={false}
-        onStartShouldSetResponderCapture={resetRNGHResponderEvent}
-        onStartShouldSetResponder={handleStartShouldSetResponder}
-        pointerEvents="box-none"
-        style={styles.logicalResponder}>
-        {children}
-      </View>
-    </JSResponderContext>
+    <View
+      collapsable={false}
+      onStartShouldSetResponderCapture={resetRNGHResponderEvent}
+      onStartShouldSetResponder={handleStartShouldSetResponder}
+      pointerEvents="box-none"
+      style={styles.logicalResponder}>
+      {children}
+    </View>
   );
 };
 
+export function interceptScrollViewChildren(children: React.ReactNode) {
+  return React.Children.map(children, (child) =>
+    child == null || typeof child === 'boolean' ? (
+      child
+    ) : (
+      <LogicalResponderChild>{child}</LogicalResponderChild>
+    )
+  );
+}
+
 const styles = StyleSheet.create({
   logicalResponder: {
     display: 'contents',
   },
 });
-
-export default ScrollViewResponderInterceptor;