fix: read window height from a shared value on ui thread

Author: gorhom

src/hooks/useAnimatedLayout.ts

@@ -1,4 +1,5 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { Dimensions } from 'react-native';
 import {
   makeMutable,
   type SharedValue,
@@ -8,6 +9,7 @@ import { INITIAL_CONTAINER_LAYOUT, INITIAL_LAYOUT_VALUE } from '../constants';
 import type { ContainerLayoutState, LayoutState } from '../types';
 
 const INITIAL_STATE: LayoutState = {
+  window: Dimensions.get('window'),
   rawContainerHeight: INITIAL_LAYOUT_VALUE,
   containerHeight: INITIAL_LAYOUT_VALUE,
   containerOffset: INITIAL_CONTAINER_LAYOUT.offset,
@@ -103,6 +105,15 @@ export function useAnimatedLayout(
     },
     [state, verticalInset, modal]
   );
+  useEffect(() => {
+    Dimensions.addEventListener('change', ({ window }) => {
+      state.modify(_state => {
+        'worklet';
+        _state.window = window;
+        return _state;
+      });
+    });
+  }, [state]);
   //#endregion
 
   return state;

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Dimensions, Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 import { runOnJS, useSharedValue } from 'react-native-reanimated';
 import {
   ANIMATION_SOURCE,
@@ -345,13 +345,13 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
            *
            * because the the keyboard dismiss is interactive in iOS.
            */
-          const WINDOW_HEIGHT = Dimensions.get('window').height;
+          const { window } = animatedLayoutState.get();
           if (
             !(
               Platform.OS === 'ios' &&
               isScrollable &&
               absoluteY >
-                WINDOW_HEIGHT -
+                window.height -
                   animatedKeyboardState.get().heightWithinContainer
             )
           ) {
@@ -419,6 +419,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
         enablePanDownToClose,
         isInTemporaryPosition,
         animatedScrollableState,
+        animatedLayoutState,
         animatedDetentsState,
         animatedKeyboardState,
         animatedPosition,

src/hooks/useGestureEventsHandlersDefault.web.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Dimensions, Keyboard, Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 import { runOnJS, useSharedValue } from 'react-native-reanimated';
 import {
   ANIMATION_SOURCE,
@@ -328,13 +328,13 @@ export const useGestureEventsHandlersDefault = () => {
          *
          * because the the keyboard dismiss is interactive in iOS.
          */
-        const WINDOW_HEIGHT = Dimensions.get('window').height;
+        const { window } = animatedLayoutState.get();
         if (
           !(
             Platform.OS === 'ios' &&
             isScrollable &&
             absoluteY >
-              WINDOW_HEIGHT - animatedKeyboardState.get().heightWithinContainer
+              window.height - animatedKeyboardState.get().heightWithinContainer
           )
         ) {
           dismissKeyboardOnJs();
@@ -396,6 +396,7 @@ export const useGestureEventsHandlersDefault = () => {
       animatedDetentsState,
       animatedKeyboardState,
       animatedPosition,
+      animatedLayoutState,
       animateToPosition,
       context,
     ]

src/types.d.ts

@@ -300,6 +300,13 @@ export type ContainerLayoutState = {
  * Represents the layout state of the bottom sheet components.
  */
 export type LayoutState = {
+  /**
+   * Getting latest window layout on a shared value
+   */
+  window: {
+    height: number;
+    width: number;
+  };
   /**
    * The original height of the container before any adjustments.
    */