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 && }