refactor: replace findNodeHandle for getRefNativeTag (gorhom#1100)(by @AndreiCalazans)

Co-authored-by: Andrei Calazans <andrei.calazans@coinbase.com>

Author: AndreiCalazans

src/hooks/useScrollable.ts

@@ -1,6 +1,6 @@
 import { useCallback, RefObject, useRef } from 'react';
-import { findNodeHandle } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
+import { getRefNativeTag } from '../utilities/getRefNativeTag';
 import { SCROLLABLE_STATE, SCROLLABLE_TYPE } from '../constants';
 import type { ScrollableRef, Scrollable } from '../types';
 
@@ -38,7 +38,7 @@ export const useScrollable = () => {
     // find node handle id
     let id;
     try {
-      id = findNodeHandle(ref.current);
+      id = getRefNativeTag(ref);
     } catch {
       return;
     }

src/hooks/useScrollableSetter.ts

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
-import { findNodeHandle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useBottomSheetInternal } from './useBottomSheetInternal';
+import { getRefNativeTag } from '../utilities/getRefNativeTag';
 import { SCROLLABLE_TYPE } from '../constants';
 import type { Scrollable } from '../types';
 
@@ -31,7 +31,7 @@ export const useScrollableSetter = (
     isContentHeightFixed.value = false;
 
     // set current scrollable ref
-    const id = findNodeHandle(ref.current);
+    const id = getRefNativeTag(ref);
     if (id) {
       setScrollableRef({
         id: id,

src/utilities/getRefNativeTag.ts

@@ -0,0 +1,43 @@
+const isFunction = (ref: unknown): ref is Function => typeof ref === 'function';
+
+const hasNativeTag = (
+  ref: unknown
+): ref is { current: { _nativeTag: number } } =>
+  !!ref &&
+  typeof ref === 'object' &&
+  'current' in (ref || {}) &&
+  '_nativeTag' in ((ref as any)?.current || {});
+
+/*
+ * getRefNativeTag is an internal utility used by createBottomSheetScrollableComponent
+ * to grab the native tag from the native host component. It only works when the ref
+ * is pointing to a native Host component.
+ *
+ * Internally in the bottom-sheet library ref can be a function that returns a native tag
+ * this seems to happen due to the usage of Reanimated's animated scroll components.
+ *
+ * This should be Fabric compatible as long as the ref is a native host component.
+ * */
+export function getRefNativeTag(ref: unknown) {
+  const refType = typeof ref;
+  let nativeTag: undefined | number;
+  if (isFunction(ref)) {
+    nativeTag = ref();
+  } else if (hasNativeTag(ref)) {
+    nativeTag = ref.current._nativeTag;
+  }
+
+  if (!nativeTag || typeof nativeTag !== 'number') {
+    throw new Error(
+      `Unexpected nativeTag: ${refType}; nativeTag=${nativeTag} 
+
+			createBottomSheetScrollableComponent's ScrollableComponent needs to return 
+			a reference that contains a nativeTag to a Native HostComponent.
+
+			ref=${ref}
+			`
+    );
+  }
+
+  return nativeTag;
+}