Merge pull request Expensify#55704 from bernhardoj/fix/53136-search-m…

…odal-auto-scroll-to-bottom

Fix the viewport is scrolled to bottom when the search modal shows while a keyboard is visible

package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
     "@expensify/react-native-background-task": "file:./modules/background-task",
-    "@expensify/react-native-live-markdown": "0.1.233",
+    "@expensify/react-native-live-markdown": "0.1.234",
     "@expo/metro-runtime": "^4.0.0",
     "@firebase/app": "^0.10.10",
     "@firebase/performance": "^0.6.8",

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -2,32 +2,37 @@ import React, {useState} from 'react';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import Modal from '@components/Modal';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import * as Browser from '@libs/Browser';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
+import {isMobileChrome, isMobileSafari} from '@libs/Browser';
 import CONST from '@src/CONST';
 import SearchRouter from './SearchRouter';
 import {useSearchRouterContext} from './SearchRouterContext';
 
-const isMobileSafari = Browser.isMobileSafari();
+const isMobileWebSafari = isMobileSafari();
 
 function SearchRouterModal() {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+    const viewportOffsetTop = useViewportOffsetTop();
+    const safeAreaInsets = useSafeAreaInsets();
 
     // On mWeb Safari, the input caret stuck for a moment while the modal is animating. So, we hide the caret until the animation is done.
-    const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileSafari);
+    const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebSafari);
 
     const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER;
 
     return (
         <Modal
             type={modalType}
             isVisible={isSearchRouterDisplayed}
+            innerContainerStyle={{paddingTop: safeAreaInsets.top + viewportOffsetTop}}
             popoverAnchorPosition={{right: 6, top: 6}}
             fullscreen
             propagateSwipe
-            shouldHandleNavigationBack={Browser.isMobileChrome()}
+            shouldHandleNavigationBack={isMobileChrome()}
             onClose={closeSearchRouter}
-            onModalHide={() => setShouldHideInputCaret(isMobileSafari)}
+            onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)}
             onModalShow={() => setShouldHideInputCaret(false)}
         >
             {isSearchRouterDisplayed && (