diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index b3f147b7ac28..8f5ad55bc0c9 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -3,9 +3,7 @@ import debounce from 'lodash/debounce';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
-import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Modal from '@components/Modal';
import {useOptionsList} from '@components/OptionListContextProvider';
import type {SearchQueryJSON} from '@components/Search/types';
import type {SelectionListHandle} from '@components/SelectionList/types';
@@ -160,48 +158,37 @@ function SearchRouter() {
clearUserQuery();
});
- const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
return (
-
-
-
- {isSmallScreenWidth && (
- closeSearchRouter()}
- />
- )}
-
-
-
-
-
+
+ {isSmallScreenWidth && (
+ closeSearchRouter()}
+ />
+ )}
+
+
+
);
}
diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
index 96c11b2fa353..7d86ce1150d5 100644
--- a/src/components/Search/SearchRouter/SearchRouterList.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -175,6 +175,7 @@ function SearchRouterList(
containerStyle={[styles.mh100]}
sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]}
ref={ref}
+ showScrollIndicator={!isSmallScreenWidth}
/>
);
}
diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
new file mode 100644
index 000000000000..1f438d254a5f
--- /dev/null
+++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
+import Modal from '@components/Modal';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import CONST from '@src/CONST';
+import SearchRouter from './SearchRouter';
+import {useSearchRouterContext} from './SearchRouterContext';
+
+function SearchRouterModal() {
+ const {isSmallScreenWidth} = useResponsiveLayout();
+ const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+
+ const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
+
+ return (
+
+ {isSearchRouterDisplayed && }
+
+ );
+}
+
+SearchRouterModal.displayName = 'SearchRouterModal';
+
+export default SearchRouterModal;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 0bdd87aa4358..0453e496cecf 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -7,7 +7,7 @@ import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
import ComposeProviders from '@components/ComposeProviders';
import OptionsListContextProvider from '@components/OptionListContextProvider';
import {SearchContextProvider} from '@components/Search/SearchContext';
-import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
+import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
import useActiveWorkspace from '@hooks/useActiveWorkspace';
import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
import usePermissions from '@hooks/usePermissions';
@@ -578,7 +578,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
);
})}
-
+
{didPusherInit && }