Skip to content

Crash when calling unstable_getBoundingClientRect #2494

@EvgenMart

Description

@EvgenMart

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @gorhom/[email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
index cc85c8c..9a877ef 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
@@ -3,14 +3,14 @@ import type { View } from 'react-native';
 import { isFabricInstalled } from '../utilities/isFabricInstalled';
 
 export type BoundingClientRect = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
 };
 
 /**
@@ -42,32 +42,32 @@ export type BoundingClientRect = {
  * ```
  */
 export function useBoundingClientRect(
-  ref: RefObject<View | null>,
-  handler: (layout: BoundingClientRect) => void
+    ref: RefObject<View | null>,
+    handler: (layout: BoundingClientRect) => void
 ) {
-  if (!isFabricInstalled()) {
-    return;
-  }
+    // biome-ignore lint/correctness/useHookAtTopLevel: `isFabricInstalled` is a constant that will not change during the runtime
+    useLayoutEffect(() => {
+        if (!isFabricInstalled()) {
+            return;
+        }
 
-  // biome-ignore lint/correctness/useHookAtTopLevel: `isFabricInstalled` is a constant that will not change during the runtime
-  useLayoutEffect(() => {
-    if (!ref || !ref.current) {
-      return;
-    }
+        if (!ref || !ref.current) {
+            return;
+        }
 
-    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
+        // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
+        if (typeof ref.current.unstable_getBoundingClientRect === 'function') {
+            // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
+            const layout = ref.current.unstable_getBoundingClientRect();
+            handler(layout);
+            return;
+        }
 
-    // @ts-ignore once it `unstable_getBoundingClientRect` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
-      // @ts-ignore once it `unstable_getBoundingClientRect` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }
-  });
+        // @ts-ignore once it `unstable_getBoundingClientRect` gets stable 🤞.
+        if (typeof ref.current.getBoundingClientRect === 'function') {
+            // @ts-ignore once it `unstable_getBoundingClientRect` gets stable.
+            const layout = ref.current.getBoundingClientRect();
+            handler(layout);
+        }
+    }, [ref, handler]);
 }

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    invalidThis doesn't seem right

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions