[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

[MDSADABWASIM]

cc: @gorhom

[dppo]

Same question, is it possible to release a new version?

[layrayson]

I thought installing the nightly version from the day of this commit fix: BottomSheet example crash software-mansion/react-native-reanimated#8416] would work but it didn't. Any solutions yet?

[nlasagni]

The patch by @GeuntaBuwono solved the issue. But as asked by other people, are there any plans for an official release date with the fix?

[arthurlenoir]

• if (ref.current.unstable_getBoundingClientRect === 'function') {

shouldn't it be? if (typeof ref.current.unstable_getBoundingClientRect === 'function') {

[Naresh-Dhamu]

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

[bmitioglov]

Thank you @GeuntaBuwono ! it worked!

[puniker]

Same issue here. Any updates on an official release date??

[GladkiiDenis]

Same issue. Waiting for the official release.

[LA-Johan]

Same issue, this is blocking us from upgrading to react 0.82

[ovsiannykov]

Same issue, I use

"react-native": "0.82.0", "react-native-reanimated": "^4.1.3", "react-native-worklets": "^0.6.1", "@gorhom/bottom-sheet": "^5",

When will be update in the library?

[bmitioglov]

does bottom sheet render for you guys on the 0.82 RN? for me patch works but I don't see bottom sheet at all when I try to open it

[Matthew-Nguyen98]

does bottom sheet render for you guys on the 0.82 RN? for me patch works but I don't see bottom sheet at all when I try to open it

It renders for me but there are styling issues, things are compressed or cut off and android there are compatibility issues with scrolling

[bmitioglov]

does bottom sheet render for you guys on the 0.82 RN? for me patch works but I don't see bottom sheet at all when I try to open it

It renders for me but there are styling issues, things are compressed or cut off and android there are compatibility issues with scrolling

Not even rendering for me it's so weird. Should we downgrade RN? And then downgrade reanimated to v3...

[JakobHartman]

I have down graded everything and it still gives me that error

[bmitioglov]

I have down graded everything and it still gives me that error

Did you try the patch few answers above? It worked for me to solve the error, but the bottom sheet is not visible