Fix RNRenderer import for React Native 0.86+ (#4160)

## Description

React Native 0.86 removed `Libraries/Renderer/shims/ReactNative`,
breaking the `RNRenderer` import. This PR switch to `RendererProxy` and
fall back to the legacy shim for compatibility with RN < 0.86.

Author: zoontek

packages/react-native-gesture-handler/src/RNRenderer.ts

@@ -10,7 +10,7 @@ import { dropHandlers } from './dropHandlers';
 import { needsToReattach } from './needsToReattach';
 import type { AttachedGestureState, GestureDetectorState } from './types';
 import { updateHandlers } from './updateHandlers';
-import { useForceRender, validateDetectorChildren } from './utils';
+import { useForceRender } from './utils';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view
@@ -34,7 +34,6 @@ export function useDetectorUpdater(
         didUnderlyingViewChange ||
         needsToReattach(preparedGesture, gesturesToAttach)
       ) {
-        validateDetectorChildren(state.viewRef);
         dropHandlers(preparedGesture);
         attachHandlers({
           preparedGesture,

packages/react-native-gesture-handler/src/RNRenderer.web.ts

@@ -1,7 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import { Platform } from 'react-native';
 
-import { RNRenderer } from '../../../RNRenderer';
 import { isTestEnv, tagMessage } from '../../../utils';
 import type {
   GestureHandlerNativeEvent,
@@ -124,56 +122,6 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function validateDetectorChildren(ref: any) {
-  // Finds the first native view under the Wrap component and traverses the fiber tree upwards
-  // to check whether there is more than one native view as a pseudo-direct child of GestureDetector
-  // i.e. this is not ok:
-  //            Wrap
-  //             |
-  //            / \
-  //           /   \
-  //          /     \
-  //         /       \
-  //   NativeView  NativeView
-  //
-  // but this is fine:
-  //            Wrap
-  //             |
-  //         NativeView
-  //             |
-  //            / \
-  //           /   \
-  //          /     \
-  //         /       \
-  //   NativeView  NativeView
-  if (__DEV__ && Platform.OS !== 'web') {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const wrapType =
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      ref._reactInternals.elementType;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    let instance =
-      RNRenderer.findHostInstance_DEPRECATED(
-        ref
-      )._internalFiberInstanceHandleDEV;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    while (instance && instance.elementType !== wrapType) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      if (instance.sibling) {
-        throw new Error(
-          'GestureDetector has more than one native view as its children. This can happen if you are using a custom component that renders multiple views, like React.Fragment. You should wrap content of GestureDetector with a <View> or <Animated.View>.'
-        );
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-      instance = instance.return;
-    }
-  }
-}
-
 export function useForceRender() {
   const [renderState, setRenderState] = useState(false);
   const forceRender = useCallback(() => {