Fix ref management for Reanimated 4

src/handlers/gestures/GestureDetector/Wrap.tsx

@@ -6,6 +6,7 @@
   onGestureHandlerEvent?: unknown;
   // Implicit `children` prop has been removed in @types/react^18.0.0
   children?: React.ReactNode;
+  reanimatedContext?: { current: number };
 }> {
   render() {
     try {
@@ -17,7 +18,10 @@
       const child: any = React.Children.only(this.props.children);
       return React.cloneElement(
         child,
-        { collapsable: false },
+        { 
+          collapsable: false,
+          reanimatedContext: this.props.reanimatedContext,
+        },
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         child.props.children
       );

src/handlers/gestures/GestureDetector/index.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import React, {
+  Ref,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -114,7 +115,10 @@
 
   const webEventHandlersRef = useWebEventHandlers();
   // Store state in ref to prevent unnecessary renders
-  const state = useRef<GestureDetectorState>({
+  const state = useRef<
+    GestureDetectorState 
+    & { viewRef: { props: { reanimatedContext?: { current: number } } } | null }
+  >({
     firstRender: true,
     viewRef: null,
     previousViewTag: -1,
@@ -150,7 +154,13 @@
   useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
 
   useLayoutEffect(() => {
-    const viewTag = findNodeHandle(state.viewRef) as number;
+    let viewTag = -1;
+    const reanimatedContext = state.viewRef?.props.reanimatedContext;
+    if (reanimatedContext && reanimatedContext.current > 0) {
+      viewTag = reanimatedContext.current;
+    } else {
+      viewTag = findNodeHandle(state.viewRef) as number;
+    }
     preparedGesture.isMounted = true;
 
     attachHandlers({
@@ -186,6 +196,6 @@
       </AnimatedWrap>
     );
   } else {
-    return <Wrap ref={refHandler}>{props.children}</Wrap>;
+    return <Wrap ref={refHandler as Ref<Wrap>}>{props.children}</Wrap>;
   }
 };

src/handlers/gestures/GestureDetector/useViewRefHandler.ts

@@ -9,6 +9,10 @@
   isViewFlatteningDisabled: (node: unknown) => boolean | null; // JSI function
 };
 
+type Props = {
+  reanimatedContext?: { current: number },
+}
+
 // Ref handler for the Wrap component attached under the GestureDetector.
 // It's responsible for setting the viewRef on the state and triggering the reattaching of handlers
 // if the view has changed.
@@ -17,7 +21,7 @@
   updateAttachedGestures: (skipConfigUpdate?: boolean) => void
 ) {
   const refHandler = useCallback(
-    (ref: React.Component | null) => {
+    (ref: (React.Component<Props>)) => {
       if (ref === null) {
         return;
       }
@@ -26,7 +30,12 @@
 
       // if it's the first render, also set the previousViewTag to prevent reattaching gestures when not needed
       if (state.previousViewTag === -1) {
-        state.previousViewTag = findNodeHandle(state.viewRef) as number;
+        const reanimatedContext = ref.props.reanimatedContext;
+        if (reanimatedContext && reanimatedContext.current > 0) {
+          state.previousViewTag = reanimatedContext.current;
+        } else {
+          state.previousViewTag = findNodeHandle(state.viewRef) as number;
+        }
       }
 
       // Pass true as `skipConfigUpdate`. Here we only want to trigger the eventual reattaching of handlers