[Bug]: Crash in reanimated(v4) fabric example project

[Farteen]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I want to express my sincere gratitude to the maintainers and contributors of this project.

Context:
There's a crash, when I clicked the reanimated fabric example repo bottomsheet, the app crashed with the error information below.

Reproduction steps

1. Run react-native-reanimated project fabric example on iOS device or simulator (both of them crashed)
2. Click the bottomsheet on the list
3. App crashed

Possible solution:
Per the error information, I update the code as below, and the crash gone away. Should I raise a PR for this?

    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;
    }

    // Fallback to the stable API when available
    // @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);
    }

Reproduction sample

https://snack.expo.dev/@farteen/b7f71e

Relevant log output

[Daniel3711997]

Same problem in React Native 0.82

[Baskerville42]

that’s a very quick and dirty temporary solution, just to prevent crashing
don't recommend

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
index 0223843..48139b1 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
@@ -135,10 +135,12 @@ function BottomSheetHandleContainerComponent({
     [animatedLayoutState]
   );
   const handleBoundingClientRect = useCallback(
-    ({ height }: BoundingClientRect) => {
+    (params: BoundingClientRect) => {
+      if (!params?.height) return;
+
       animatedLayoutState.modify(state => {
         'worklet';
-        state.handleHeight = height;
+        state.handleHeight = params.height;
         return state;
       });
 
@@ -148,7 +150,7 @@ function BottomSheetHandleContainerComponent({
           method: 'handleBoundingClientRect',
           category: 'layout',
           params: {
-            height,
+            height: params.height,
           },
         });
       }
diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
index cc85c8c..dd0742d 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
@@ -58,7 +58,7 @@ export function useBoundingClientRect(
     // @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();
+      const layout = ref.current?.unstable_getBoundingClientRect?.();
       handler(layout);
       return;
     }

[cristianrosu]

Kinda the same here, app crashes with react native 0.82 when i try to render a BottomSheet

[GeuntaBuwono]

I'm also facing the same issue.

"@gorhom/bottom-sheet": "^5",
"react-native-reanimated": "^4.1.3",
"@shopify/react-native-skia": "^2.3.0",
"react-native-gesture-handler": "^2.28.0",
"react-native": "^0.82.0",

[GeuntaBuwono]

I've fixed it, this is the correct patch for patch-package

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
index 0223843..823d541 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
@@ -135,10 +135,11 @@ function BottomSheetHandleContainerComponent({
     [animatedLayoutState]
   );
   const handleBoundingClientRect = useCallback(
-    ({ height }: BoundingClientRect) => {
+    (params: BoundingClientRect) => {
+      if (!params?.height) return;
       animatedLayoutState.modify(state => {
         'worklet';
-        state.handleHeight = height;
+        state.handleHeight = params.height;
         return state;
       });
 
@@ -148,7 +149,7 @@ function BottomSheetHandleContainerComponent({
           method: 'handleBoundingClientRect',
           category: 'layout',
           params: {
-            height,
+            height: params.height,
           },
         });
       }
diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
index cc85c8c..9d55c19 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
@@ -56,7 +56,7 @@ export function useBoundingClientRect(
     }
 
     // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
+    if (ref.current.unstable_getBoundingClientRect === 'function') {
       // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
       const layout = ref.current.unstable_getBoundingClientRect();
       handler(layout);
@@ -64,9 +64,9 @@ export function useBoundingClientRect(
     }
 
     // @ts-ignore once it `unstable_getBoundingClientRect` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
+    if (ref.current.getBoundingClientRect === 'function') {
       // @ts-ignore once it `unstable_getBoundingClientRect` gets stable.
-      const layout = ref.current.getBoundingClientRect();
+      const layout = ref.current?.unstable_getBoundingClientRect?.();
       handler(layout);
     }
   });

[cristianrosu]

Thanks. will try it out. Any updates on an official release date and maybe update to support reanimated 4.x?

[GeuntaBuwono]

Thanks. will try it out. Any updates on an official release date and maybe update to support reanimated 4.x?

I don't know yet.

[NaseemYE]

same issue

[70nyIT]

yup, same issue here confirmed. Upgraded to Expo 54 - getting into this

[AdrianCD101]

Yup same issue

[HariomOneclick]

Same issue

"@gorhom/bottom-sheet": "^5.2.6",
"react-native": "0.82.0",
"react-native-reanimated": "^4.1.3",
"react-native-gesture-handler": "^2.28.0",
"react-native-worklets": "^0.6.1",

[Matthew-Nguyen98]

Same issue

"@gorhom/bottom-sheet": "^5.2.6",
"react-native": "0.82.0",
"react-native-reanimated": "^4.1.3",
"react-native-gesture-handler": "^2.28.0",
"react-native-worklets": "^0.6.1",

[hoscahmet]

Same issue

"@gorhom/bottom-sheet": "^5.2.6",
"react-native": "0.82.0",
"react-native-reanimated": "^4.1.3",
"react-native-gesture-handler": "^2.28.0",
"react-native-worklets": "^0.6.1",

[irmakcosarsahna]

Same issue