Use visual viewport to detect keyboard show/hide

Expensify · Dec 19, 2024 · 968a125 · 968a125
1 parent 65345c4
commit 968a125
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
@@ -16,7  16,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import type {PlatformStackNavigationProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList, RootStackParamList} from '@libs/Navigation/types';
-import addViewportResizeListener from '@libs/VisualViewport';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import CustomDevMenu from './CustomDevMenu';
@@ -171,8  170,6 @@ function ScreenWrapper(
         return !!route?.params && 'singleNewDotEntry' in route.params && route.params.singleNewDotEntry === 'true';
     }, [route?.params]);
 
-    const initVisualViewport = Browser.isSafari() && window.visualViewport ? window.visualViewport.height : undefined;
-    const [isMaxHeightReady, setIsMaxHeightReady] = useState(!Browser.isSafari());
     UNSTABLE_usePreventRemove(shouldReturnToOldDot, () => {
         NativeModules.HybridAppModule?.closeReactNativeApp(false, false);
     });
@@ -196,26  193,6 @@ function ScreenWrapper(
         }),
     ).current;
 
-    useEffect(() => {
-        if (!Browser.isMobileSafari()) {
-            return;
-        }
-
-        const handleViewportResize = () => {
-            if (!window.visualViewport) {
-                return;
-            }
-
-            setIsMaxHeightReady(window.visualViewport.height === initVisualViewport);
-        };
-
-        const removeViewportResizeListener = addViewportResizeListener(handleViewportResize);
-
-        return () => {
-            removeViewportResizeListener();
-        };
-    }, [initVisualViewport]);
-
     useEffect(() => {
         // On iOS, the transitionEnd event doesn't trigger some times. As such, we need to set a timeout
         const timeout = setTimeout(() => {
@@ -299,12  276,7 @@ function ScreenWrapper(
                     {...keyboardDismissPanResponder.panHandlers}
                 >
                     <KeyboardAvoidingView
-                        style={[
-                            styles.w100,
-                            styles.h100,
-                            {maxHeight: isMaxHeightReady ? maxHeight : undefined},
-                            isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {},
-                        ]}
                         style={[styles.w100, styles.h100, {maxHeight}, isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {}]}
                         behavior={keyboardAvoidingViewBehavior}
                         enabled={shouldEnableKeyboardAvoidingView}
                     >

diff --git a/src/utils/keyboard.ts → src/utils/keyboard/index.ts b/src/utils/keyboard.ts → src/utils/keyboard/index.ts
diff --git a/src/utils/keyboard/index.website.ts b/src/utils/keyboard/index.website.ts
@@ -0,0  1,48 @@
 import {Keyboard} from 'react-native';
 
 let isVisible = false;
 const initialViewportHeight = window?.visualViewport?.height;
 
 const handleResize = () => {
     const currentHeight = window?.visualViewport?.height;
 
     if (!currentHeight || !initialViewportHeight) {
         return;
     }
 
     if (currentHeight < initialViewportHeight) {
         isVisible = true;
         return;
     }
 
     if (currentHeight === initialViewportHeight) {
         isVisible = false;
     }
 };
 
 window.visualViewport?.addEventListener('resize', handleResize);
 
 const dismiss = (): Promise<void> => {
     return new Promise((resolve) => {
         if (!isVisible) {
             resolve();
             return;
         }
 
         const handleDismissResize = () => {
             if (window.visualViewport?.height !== initialViewportHeight) {
                 return;
             }
 
             window.visualViewport?.removeEventListener('resize', handleDismissResize);
             return resolve();
         };
 
         window.visualViewport?.addEventListener('resize', handleDismissResize);
         Keyboard.dismiss();
     });
 };
 
 const utils = {dismiss};
 
 export default utils;