From c57eed0eaefedc4f2752155bcbe0d31e94ea010e Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Mon, 23 Sep 2024 11:12:40 -0700
Subject: [PATCH] use reactive window dimensions for window height

---
 .../useCustomGestureEventsHandlers.ts                    | 8 +++++---
 .../bottomSheetContainer/BottomSheetContainer.tsx        | 9 ++++++---
 src/constants.ts                                         | 3 +--
 src/hooks/useGestureEventsHandlersDefault.tsx            | 8 +++++---
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts b/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts
index a171012ed..177cf669f 100644
--- a/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts
+++ b/example/app/src/screens/advanced/customGestureHandling/useCustomGestureEventsHandlers.ts
@@ -1,4 +1,4 @@
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, useWindowDimensions } from 'react-native';
 import { runOnJS, useWorkletCallback } from 'react-native-reanimated';
 import { clamp, snapPoint } from 'react-native-redash';
 import {
@@ -6,7 +6,6 @@ import {
   GESTURE_SOURCE,
   KEYBOARD_STATE,
   SCROLLABLE_TYPE,
-  WINDOW_HEIGHT,
   GestureEventHandlerCallbackType,
   ANIMATION_SOURCE,
 } from '@gorhom/bottom-sheet';
@@ -211,6 +210,8 @@ export const useCustomGestureEventsHandlers = () => {
       animatedScrollableContentOffsetY,
     ]
   );
+  const windowDimensions = useWindowDimensions();
+  const windowHeight = windowDimensions.height;
   const handleOnEnd: GestureEventHandlerCallbackType = useWorkletCallback(
     function handleOnEnd(
       source,
@@ -265,7 +266,7 @@ export const useCustomGestureEventsHandlers = () => {
           !(
             Platform.OS === 'ios' &&
             isScrollable &&
-            absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value
+            absoluteY > windowHeight - animatedKeyboardHeight.value
           )
         ) {
           dismissKeyboardOnJs();
@@ -345,6 +346,7 @@ export const useCustomGestureEventsHandlers = () => {
       animatedScrollableContentOffsetY,
       isInTemporaryPosition,
       isScrollableRefreshable,
+      windowHeight,
     ]
   );
 
diff --git a/src/components/bottomSheetContainer/BottomSheetContainer.tsx b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
index ffcd5448a..ab40fdc18 100644
--- a/src/components/bottomSheetContainer/BottomSheetContainer.tsx
+++ b/src/components/bottomSheetContainer/BottomSheetContainer.tsx
@@ -3,10 +3,10 @@ import {
   LayoutChangeEvent,
   StatusBar,
   StyleProp,
+  useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
-import { WINDOW_HEIGHT } from '../../constants';
 import { print } from '../../utilities';
 import { styles } from './styles';
 import type { BottomSheetContainerProps } from './types';
@@ -37,6 +37,9 @@ function BottomSheetContainerComponent({
   );
   //#endregion
 
+  const windowDimensions = useWindowDimensions();
+  const windowHeight = windowDimensions.height;
+
   //#region callbacks
   const handleContainerLayout = useCallback(
     function handleContainerLayout({
@@ -54,7 +57,7 @@ function BottomSheetContainerComponent({
             right: 0,
             bottom: Math.max(
               0,
-              WINDOW_HEIGHT -
+              windowHeight -
                 ((pageY ?? 0) + height + (StatusBar.currentHeight ?? 0))
             ),
           };
@@ -69,7 +72,7 @@ function BottomSheetContainerComponent({
         },
       });
     },
-    [containerHeight, containerOffset, containerRef]
+    [containerHeight, containerOffset, containerRef, windowHeight]
   );
   //#endregion
 
diff --git a/src/constants.ts b/src/constants.ts
index 7deaa5137..7809cbd55 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,7 +1,7 @@
 import { Dimensions, Platform } from 'react-native';
 import Animated, { Easing } from 'react-native-reanimated';
 
-const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window');
+const { width: WINDOW_WIDTH } = Dimensions.get('window');
 const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('screen');
 
 enum GESTURE_SOURCE {
@@ -125,7 +125,6 @@ export {
   SCROLLABLE_TYPE,
   SCROLLABLE_STATE,
   KEYBOARD_STATE,
-  WINDOW_HEIGHT,
   WINDOW_WIDTH,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
diff --git a/src/hooks/useGestureEventsHandlersDefault.tsx b/src/hooks/useGestureEventsHandlersDefault.tsx
index a5aa3140e..cb500c507 100644
--- a/src/hooks/useGestureEventsHandlersDefault.tsx
+++ b/src/hooks/useGestureEventsHandlersDefault.tsx
@@ -1,4 +1,4 @@
-import { Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform, useWindowDimensions } from 'react-native';
 import { runOnJS, useWorkletCallback } from 'react-native-reanimated';
 import { useBottomSheetInternal } from './useBottomSheetInternal';
 import {
@@ -6,7 +6,6 @@ import {
   GESTURE_SOURCE,
   KEYBOARD_STATE,
   SCROLLABLE_TYPE,
-  WINDOW_HEIGHT,
 } from '../constants';
 import type {
   GestureEventsHandlersHookType,
@@ -236,6 +235,8 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
           animatedScrollableContentOffsetY,
         ]
       );
+    const windowDimensions = useWindowDimensions();
+    const windowHeight = windowDimensions.height;
     const handleOnEnd: GestureEventHandlerCallbackType<GestureEventContextType> =
       useWorkletCallback(
         function handleOnEnd(
@@ -309,7 +310,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
               !(
                 Platform.OS === 'ios' &&
                 isScrollable &&
-                absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value
+                absoluteY > windowHeight - animatedKeyboardHeight.value
               )
             ) {
               runOnJS(dismissKeyboard)();
@@ -378,6 +379,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
           animatedSnapPoints,
           animatedScrollableContentOffsetY,
           animateToPosition,
+          windowHeight,
         ]
       );
     //#endregion