[React Native 0.82] fix: Update the check for getBoundingClientRect function

[fab-nikhil]

Motivation

Since, React Native 0.82, getBoundingClientRect is stable now and 'unstable_getBoundingClientRect' has been removed which returns undefined and leads to app crash whenever a bottom sheet is opened which uses a custom handleComponent

[AZ604]

can confirm that this fixes the problem with react 0.82

my patch looks like this:

diff --git a/node_modules/@gorhom/bottom-sheet/lib/commonjs/hooks/useBoundingClientRect.js b/node_modules/@gorhom/bottom-sheet/lib/commonjs/hooks/useBoundingClientRect.js
index b4a90b7..aaf7dcf 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/commonjs/hooks/useBoundingClientRect.js
+++ b/node_modules/@gorhom/bottom-sheet/lib/commonjs/hooks/useBoundingClientRect.js
@@ -45,19 +45,23 @@ function useBoundingClientRect(ref, handler) {
       return;
     }
 
+    var unstableGetBoundingClientRect =
+    // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
+    ref.current.unstable_getBoundingClientRect;
     // @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();
+    if (typeof unstableGetBoundingClientRect === 'function') {
+      var layout = unstableGetBoundingClientRect.call(ref.current);
       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);
+    var getBoundingClientRect =
+    // @ts-ignore once it `unstable_getBoundingClientRect` gets stable.
+    ref.current.getBoundingClientRect;
+    if (typeof getBoundingClientRect === 'function') {
+      var _layout = getBoundingClientRect.call(ref.current);
+      handler(_layout);
     }
   });
 }
diff --git a/node_modules/@gorhom/bottom-sheet/lib/module/hooks/useBoundingClientRect.js b/node_modules/@gorhom/bottom-sheet/lib/module/hooks/useBoundingClientRect.js
index a723aed..0271b81 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/module/hooks/useBoundingClientRect.js
+++ b/node_modules/@gorhom/bottom-sheet/lib/module/hooks/useBoundingClientRect.js
@@ -42,17 +42,17 @@ export function useBoundingClientRect(ref, handler) {
     }
 
     // @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 unstableGetBoundingClientRect = ref.current.unstable_getBoundingClientRect;
+    if (typeof unstableGetBoundingClientRect === 'function') {
+      const layout = unstableGetBoundingClientRect.call(ref.current);
       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();
+    const getBoundingClientRect = ref.current.getBoundingClientRect;
+    if (typeof getBoundingClientRect === 'function') {
+      const layout = getBoundingClientRect.call(ref.current);
       handler(layout);
     }
   });
diff --git a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
index cc85c8c..19b12ff 100644
--- a/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/hooks/useBoundingClientRect.ts
@@ -56,17 +56,21 @@ export function useBoundingClientRect(
     }
 
     // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
+    const unstableGetBoundingClientRect =
       // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
+      ref.current.unstable_getBoundingClientRect;
+    if (typeof unstableGetBoundingClientRect === 'function') {
+      const layout = unstableGetBoundingClientRect.call(ref.current);
       handler(layout);
       return;
     }
 
     // @ts-ignore once it `unstable_getBoundingClientRect` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
+    const getBoundingClientRect =
       // @ts-ignore once it `unstable_getBoundingClientRect` gets stable.
-      const layout = ref.current.getBoundingClientRect();
+      ref.current.getBoundingClientRect;
+    if (typeof getBoundingClientRect === 'function') {
+      const layout = getBoundingClientRect.call(ref.current);
       handler(layout);
     }
   });

[zispidd]

same issue

[Majed04]

can confirm this fixed my issue with react native 0.82