Mobile search-router is a RHP on native

src/ROUTES.ts

@@ -58,7 +58,7 @@ const ROUTES = {
 
     // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
     WORKSPACES_LIST: {route: 'workspaces', getRoute: (backTo?: string) => getUrlWithBackToParam('workspaces', backTo)},
-
+    SEARCH_ROUTER: 'search-router',
     SEARCH_ROOT: {
         route: 'search',
         getRoute: ({query, rawQuery, name}: {query: SearchQueryString; rawQuery?: SearchQueryString; name?: string}) => {

src/SCREENS.ts

@@ -221,6 +221,7 @@ const SCREENS = {
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
         TWO_FACTOR_AUTH: 'TwoFactorAuth',
+        SEARCH_ROUTER: 'Search_Router',
         NEW_CHAT: 'NewChat',
         DETAILS: 'Details',
         PROFILE: 'Profile',

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -8,6 +8,7 @@ import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import {closeSearch, openSearch} from './toggleSearch';
 
 type SearchRouterContext = {
     isSearchRouterDisplayed: boolean;
@@ -40,7 +41,6 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
     const [isSearchRouterDisplayed, setIsSearchRouterDisplayed] = useState(false);
     const searchRouterDisplayedRef = useRef(false);
     const searchPageInputRef = useRef<AnimatedTextInputRef | undefined>(undefined);
-
     useEffect(() => {
         if (!canListenPopState) {
             return;
@@ -76,15 +76,15 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
             }
             close(
                 () => {
-                    setIsSearchRouterDisplayed(true);
+                    openSearch(setIsSearchRouterDisplayed);
                     searchRouterDisplayedRef.current = true;
                 },
                 false,
                 true,
             );
         };
         const closeSearchRouter = () => {
-            setIsSearchRouterDisplayed(false);
+            closeSearch(setIsSearchRouterDisplayed);
             searchRouterDisplayedRef.current = false;
             if (isBrowserWithHistory) {
                 const state = window.history.state as HistoryState | null;
@@ -143,7 +143,7 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
             registerSearchPageInput,
             unregisterSearchPageInput,
         };
-    }, [isSearchRouterDisplayed, setIsSearchRouterDisplayed]);
+    }, [isSearchRouterDisplayed]);
 
     return <Context.Provider value={routerContext}>{children}</Context.Provider>;
 }

src/components/Search/SearchRouter/SearchRouterModal/index.native.tsx

@@ -0,0 +1,8 @@
+/**
+ * On native devices SearchRouter is served from SearchRouterPage, on web from SearchRouterModal.
+ */
+function SearchRouterModal() {
+    return null;
+}
+
+export default SearchRouterModal;

src/components/Search/SearchRouter/SearchRouterModal.tsx → src/components/Search/SearchRouter/SearchRouterModal/index.tsx

@@ -3,12 +3,12 @@ import {Dimensions} from 'react-native';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import Modal from '@components/Modal';
 import ScreenWrapperContainer from '@components/ScreenWrapper/ScreenWrapperContainer';
+import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
+import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import {isMobileIOS} from '@libs/Browser';
 import CONST from '@src/CONST';
-import SearchRouter from './SearchRouter';
-import {useSearchRouterContext} from './SearchRouterContext';
 
 const isMobileWebIOS = isMobileIOS();
 

src/components/Search/SearchRouter/SearchRouterPage/index.native.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
+import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
+
+function SearchRouterPage() {
+    const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+
+    return (
+        <ScreenWrapper
+            testID="SearchRouterPage"
+            shouldEnableMaxHeight
+            enableEdgeToEdgeBottomSafeAreaPadding
+            includePaddingTop
+            includeSafeAreaPaddingBottom
+        >
+            <SearchRouter
+                onRouterClose={closeSearchRouter}
+                shouldHideInputCaret={false}
+                isSearchRouterDisplayed={isSearchRouterDisplayed}
+            />
+        </ScreenWrapper>
+    );
+}
+
+SearchRouterPage.displayName = 'SearchRouterPage';
+
+export default SearchRouterPage;

src/components/Search/SearchRouter/SearchRouterPage/index.tsx

@@ -0,0 +1,11 @@
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+/**
+ * On native devices SearchRouter is served from SearchRouterPage, on web from SearchRouterModal.
+ */
+function SearchRouterPage() {
+    return Navigation.navigate(ROUTES.HOME);
+}
+
+export default SearchRouterPage;

src/components/Search/SearchRouter/toggleSearch/index.native.tsx

@@ -0,0 +1,12 @@
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+
+function openSearch() {
+    return Navigation.navigate(ROUTES.SEARCH_ROUTER);
+}
+
+function closeSearch() {
+    return Navigation.dismissModal();
+}
+
+export {openSearch, closeSearch};

src/components/Search/SearchRouter/toggleSearch/index.tsx

@@ -0,0 +1,9 @@
+function openSearch(setSearchState: React.Dispatch<React.SetStateAction<boolean>>) {
+    return setSearchState(true);
+}
+
+function closeSearch(setSearchState: React.Dispatch<React.SetStateAction<boolean>>) {
+    return setSearchState(false);
+}
+
+export {openSearch, closeSearch};

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -817,6 +817,10 @@ const TwoFactorAuthenticatorStackNavigator = createModalStackNavigator<EnablePay
     [SCREENS.TWO_FACTOR_AUTH.SUCCESS]: () => require<ReactComponentModule>('../../../../pages/settings/Security/TwoFactorAuth/SuccessPage').default,
 });
 
+const SearchRouterModalStackNavigator = createModalStackNavigator({
+    [SCREENS.RIGHT_MODAL.SEARCH_ROUTER]: () => require<ReactComponentModule>('../../../../components/Search/SearchRouter/SearchRouterPage').default,
+});
+
 const EnablePaymentsStackNavigator = createModalStackNavigator<EnablePaymentsNavigatorParamList>({
     [SCREENS.ENABLE_PAYMENTS_ROOT]: () => require<ReactComponentModule>('../../../../pages/EnablePayments/EnablePaymentsPage').default,
 });
@@ -1023,4 +1027,5 @@ export {
     WorkspaceConfirmationModalStackNavigator,
     WorkspaceDuplicateModalStackNavigator,
     WorkspacesDomainModalStackNavigator,
+    SearchRouterModalStackNavigator,
 };

src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

@@ -179,6 +179,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
                         screenListeners={screenListeners}
                         id={NAVIGATORS.RIGHT_MODAL_NAVIGATOR}
                     >
+                        <Stack.Screen
+                            name={SCREENS.RIGHT_MODAL.SEARCH_ROUTER}
+                            component={ModalStackNavigators.SearchRouterModalStackNavigator}
+                        />
                         <Stack.Screen
                             name={SCREENS.RIGHT_MODAL.SETTINGS}
                             component={ModalStackNavigators.SettingsModalStackNavigator}

src/libs/Navigation/linkingConfig/config.ts

@@ -156,6 +156,10 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
         },
         [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {
             screens: {
+                [SCREENS.RIGHT_MODAL.SEARCH_ROUTER]: {
+                    path: ROUTES.SEARCH_ROUTER,
+                    exact: true,
+                },
                 [SCREENS.RIGHT_MODAL.SETTINGS]: {
                     screens: {
                         [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: {

src/libs/Navigation/types.ts

@@ -2178,6 +2178,7 @@ type WorkspacesDomainModalNavigatorParamList = {
 type RightModalNavigatorParamList = {
     [SCREENS.RIGHT_MODAL.SETTINGS]: NavigatorScreenParams<SettingsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.TWO_FACTOR_AUTH]: NavigatorScreenParams<TwoFactorAuthNavigatorParamList>;
+    [SCREENS.RIGHT_MODAL.SEARCH_ROUTER]: undefined;
     [SCREENS.RIGHT_MODAL.NEW_CHAT]: NavigatorScreenParams<NewChatNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.DETAILS]: NavigatorScreenParams<DetailsNavigatorParamList>;
     [SCREENS.RIGHT_MODAL.PROFILE]: NavigatorScreenParams<ProfileNavigatorParamList>;