feat: prepare for new search modal

src/app/AppRegistry.tsx

@@ -37,6 +37,7 @@ import { RecentlyViewedScreen } from "app/Scenes/RecentlyViewed/RecentlyViewed"
 import { SavedArtworks } from "app/Scenes/SavedArtworks/SavedArtworks"
 import { AlertArtworks } from "app/Scenes/SavedSearchAlert/AlertArtworks"
 import { SearchScreen, SearchScreenQuery } from "app/Scenes/Search/Search"
+import { SearchModalScreen } from "app/Scenes/SearchModal/SeachModal"
 import { SubmitArtworkForm } from "app/Scenes/SellWithArtsy/ArtworkForm/SubmitArtworkForm"
 import { SubmitArtworkFormEditContainer } from "app/Scenes/SellWithArtsy/ArtworkForm/SubmitArtworkFormEdit"
 import { SimilarToRecentlyViewedScreen } from "app/Scenes/SimilarToRecentlyViewed/SimilarToRecentlyViewed"
@@ -802,6 +803,14 @@ export const modules = defineModules({
     { isRootViewForTabName: "search", hidesBackButton: true, fullBleed: true },
     [SearchScreenQuery]
   ),
+  SearchModal: reactModule(SearchModalScreen, {
+    fullBleed: true,
+    hidesBackButton: true,
+    alwaysPresentModally: true,
+    screenOptions: {
+      animation: "fade",
+    },
+  }),
   Show: reactModule(ShowQueryRenderer, { fullBleed: true }),
   ShowMoreInfo: reactModule(ShowMoreInfoQueryRenderer),
   SimilarToRecentlyViewed: reactModule(SimilarToRecentlyViewedScreen, {

src/app/Components/GlobalSearchInput.tsx

@@ -0,0 +1,30 @@
+import { Flex, RoundSearchInput, Touchable } from "@artsy/palette-mobile"
+import { GlobalSearchInputModal } from "app/Components/GlobalSearchInputModal"
+import { SEARCH_INPUT_PLACEHOLDER } from "app/Scenes/Search/Search"
+import { navigate } from "app/system/navigation/navigate"
+import { Fragment, useState } from "react"
+
+export const GlobalSearchInput: React.FC<{}> = () => {
+  const [isVisible, setIsVisible] = useState(false)
+  return (
+    <Fragment>
+      <Touchable
+        onPress={() => {
+          navigate("search/modal")
+        }}
+      >
+        <Flex pointerEvents="none">
+          <RoundSearchInput
+            placeholder={SEARCH_INPUT_PLACEHOLDER}
+            accessibilityHint="Search artists, artworks, galleries etc."
+            accessibilityLabel="Search artists, artworks, galleries etc."
+            maxLength={55}
+            numberOfLines={1}
+            multiline={false}
+          />
+        </Flex>
+      </Touchable>
+      <GlobalSearchInputModal visible={isVisible} hideModal={() => setIsVisible(false)} />
+    </Fragment>
+  )
+}

src/app/Components/GlobalSearchInputModal.tsx

@@ -0,0 +1,32 @@
+import { Flex, RoundSearchInput, Spacer } from "@artsy/palette-mobile"
+import { SEARCH_INPUT_PLACEHOLDER } from "app/Scenes/Search/Search"
+import { Modal } from "react-native"
+import { SafeAreaView } from "react-native-safe-area-context"
+
+export const GlobalSearchInputModal: React.FC<{ visible: boolean; hideModal: () => void }> = ({
+  visible,
+  hideModal,
+}) => {
+  return (
+    <Modal visible={visible} animationType="fade">
+      <SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
+        <Flex px={2} pt={2}>
+          <RoundSearchInput
+            placeholder={SEARCH_INPUT_PLACEHOLDER}
+            accessibilityHint="Search artists, artworks, galleries etc."
+            accessibilityLabel="Search artists, artworks, galleries etc."
+            maxLength={55}
+            numberOfLines={1}
+            autoFocus
+            multiline={false}
+            onLeftIconPress={() => {
+              hideModal()
+            }}
+          />
+        </Flex>
+        <Spacer y={2} />
+        <Flex flex={1} backgroundColor="black10" />
+      </SafeAreaView>
+    </Modal>
+  )
+}

src/app/Scenes/HomeView/Components/HomeHeader.tsx

@@ -1,24 +1,54 @@
-import { ArtsyLogoBlackIcon, Flex, Box } from "@artsy/palette-mobile"
+import { ArtsyLogoBlackIcon, Box, Flex } from "@artsy/palette-mobile"
+import { GlobalSearchInput } from "app/Components/GlobalSearchInput"
 import { PaymentFailureBanner } from "app/Scenes/HomeView/Components/PaymentFailureBanner"
 import { GlobalStore } from "app/store/GlobalStore"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { Suspense } from "react"
 import { ActivityIndicator } from "./ActivityIndicator"
 
 export const HomeHeader: React.FC = () => {
+  const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   const showPaymentFailureBanner = useFeatureFlag("AREnablePaymentFailureBanner")
   const hasUnseenNotifications = GlobalStore.useAppState(
     (state) => state.bottomTabs.hasUnseenNotifications
   )
 
+  if (enableNewSearchModal) {
+    return (
+      <Flex backgroundColor="white100">
+        {!!showPaymentFailureBanner && (
+          <Suspense fallback={null}>
+            <PaymentFailureBanner />
+          </Suspense>
+        )}
+        <Flex py={2}>
+          <Flex
+            flexDirection="row"
+            px={2}
+            gap={2}
+            justifyContent="space-around"
+            alignItems="center"
+          >
+            <Flex flex={1}>
+              <GlobalSearchInput />
+            </Flex>
+            <Flex alignItems="flex-end">
+              <ActivityIndicator hasUnseenNotifications={hasUnseenNotifications} />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    )
+  }
+
   return (
     <>
       {!!showPaymentFailureBanner && (
         <Suspense fallback={null}>
           <PaymentFailureBanner />
         </Suspense>
       )}
-      <Box py={2}>
+      <Box py={2} backgroundColor="white100">
         <Flex flexDirection="row" px={2} justifyContent="space-between" alignItems="center">
           <Box flex={1} />
           <Box>

src/app/Scenes/HomeView/HomeView.tsx

@@ -18,6 +18,7 @@ import { searchQueryDefaultVariables } from "app/Scenes/Search/Search"
 import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { useBottomTabsScrollToTop } from "app/utils/bottomTabsHelper"
 import { extractNodes } from "app/utils/extractNodes"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { ProvidePlaceholderContext } from "app/utils/placeholders"
 import { usePrefetch } from "app/utils/queryPrefetching"
 import { requestPushNotificationsPermission } from "app/utils/requestPushNotificationsPermission"
@@ -33,6 +34,7 @@ export const homeViewScreenQueryVariables = () => ({
 })
 
 export const HomeView: React.FC = () => {
+  const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   const flashlistRef = useBottomTabsScrollToTop("home")
   const [isRefreshing, setIsRefreshing] = useState(false)
 
@@ -128,10 +130,20 @@ export const HomeView: React.FC = () => {
     })
   }
 
+  const stickyHeaderProps = enableNewSearchModal
+    ? {
+        stickyHeaderHiddenOnScroll: true,
+        stickyHeaderIndices: [0],
+      }
+    : {}
+
   return (
     <Screen safeArea={true}>
       <Screen.Body fullwidth>
         <FlatList
+          automaticallyAdjustKeyboardInsets
+          keyboardDismissMode="on-drag"
+          keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
           ref={flashlistRef as RefObject<FlatList>}
           data={sections}
@@ -150,6 +162,7 @@ export const HomeView: React.FC = () => {
           }
           refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
           onEndReachedThreshold={2}
+          {...stickyHeaderProps}
         />
         {!!data?.me && <EmailConfirmationBannerFragmentContainer me={data.me} />}
       </Screen.Body>

src/app/Scenes/Search/Search.tsx

@@ -3,12 +3,14 @@ import { Spacer, Flex, Box, Screen } from "@artsy/palette-mobile"
 import { useNavigation } from "@react-navigation/native"
 import { StackScreenProps } from "@react-navigation/stack"
 import { SearchQuery, SearchQuery$variables } from "__generated__/SearchQuery.graphql"
+import { GlobalSearchInput } from "app/Components/GlobalSearchInput"
 import { SearchInput } from "app/Components/SearchInput"
 import { SearchPills } from "app/Scenes/Search/SearchPills"
 import { useRefetchWhenQueryChanged } from "app/Scenes/Search/useRefetchWhenQueryChanged"
 import { useSearchQuery } from "app/Scenes/Search/useSearchQuery"
 import { ArtsyKeyboardAvoidingView } from "app/utils/ArtsyKeyboardAvoidingView"
 import { useBottomTabsScrollToTop } from "app/utils/bottomTabsHelper"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { Schema } from "app/utils/track"
 import { throttle } from "lodash"
 import { Suspense, useEffect, useMemo, useRef, useState } from "react"
@@ -28,8 +30,7 @@ import { SEARCH_PILLS, SEARCH_THROTTLE_INTERVAL, TOP_PILL } from "./constants"
 import { getContextModuleByPillName } from "./helpers"
 import { PillType } from "./types"
 
-const SEARCH_INPUT_PLACEHOLDER = [
-  "Search artists, artworks, galleries, etc",
+export const SEARCH_INPUT_PLACEHOLDER = [
   "Search artists, artworks, etc",
   "Search artworks, etc",
   "Search",
@@ -41,6 +42,7 @@ export const searchQueryDefaultVariables: SearchQuery$variables = {
 }
 
 export const Search: React.FC = () => {
+  const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   const searchPillsRef = useRef<ScrollView>(null)
   const [searchQuery, setSearchQuery] = useState<string>("")
   const [selectedPill, setSelectedPill] = useState<PillType>(TOP_PILL)
@@ -130,11 +132,15 @@ export const Search: React.FC = () => {
     <SearchContext.Provider value={searchProviderValues}>
       <ArtsyKeyboardAvoidingView>
         <Flex p={2} pb={0}>
-          <SearchInput
-            ref={searchProviderValues?.inputRef}
-            placeholder={SEARCH_INPUT_PLACEHOLDER}
-            onChangeText={onSearchTextChanged}
-          />
+          {enableNewSearchModal ? (
+            <GlobalSearchInput />
+          ) : (
+            <SearchInput
+              ref={searchProviderValues?.inputRef}
+              placeholder={SEARCH_INPUT_PLACEHOLDER}
+              onChangeText={onSearchTextChanged}
+            />
+          )}
         </Flex>
         <Flex flex={1} collapsable={false}>
           {shouldStartSearching(searchQuery) && !!queryData.viewer ? (
@@ -158,11 +164,15 @@ export const Search: React.FC = () => {
             </>
           ) : (
             <Scrollable ref={scrollableRef}>
-              <HorizontalPadding>
-                <RecentSearches />
-              </HorizontalPadding>
+              {!enableNewSearchModal && (
+                <>
+                  <HorizontalPadding>
+                    <RecentSearches />
+                  </HorizontalPadding>
+                  <Spacer y={4} />
+                </>
+              )}
 
-              <Spacer y={4} />
               <TrendingArtists data={queryData} mb={4} />
               <CuratedCollections collections={queryData} mb={4} />
 
@@ -189,13 +199,15 @@ export const SearchScreenQuery = graphql`
 
 type SearchScreenProps = StackScreenProps<any>
 
-export const SearchScreen: React.FC<SearchScreenProps> = () => (
-  <Screen>
-    <Suspense fallback={<SearchPlaceholder />}>
-      <Search />
-    </Suspense>
-  </Screen>
-)
+export const SearchScreen: React.FC<SearchScreenProps> = () => {
+  return (
+    <Screen>
+      <Suspense fallback={<SearchPlaceholder />}>
+        <Search />
+      </Suspense>
+    </Screen>
+  )
+}
 
 const Scrollable = styled(ScrollView).attrs(() => ({
   keyboardDismissMode: "on-drag",

src/app/Scenes/Search/components/placeholders/SearchPlaceholder.tsx

@@ -1,7 +1,15 @@
-import { Spacer, Flex, Box, Join } from "@artsy/palette-mobile"
+import {
+  Box,
+  Flex,
+  Join,
+  SEARCH_INPUT_CONTAINER_BORDER_RADIUS,
+  SEARCH_INPUT_CONTAINER_HEIGHT,
+  Spacer,
+} from "@artsy/palette-mobile"
 import { CARD_WIDTH } from "app/Components/Home/CardRailCard"
 import { MAX_SHOWN_RECENT_SEARCHES, useRecentSearches } from "app/Scenes/Search/SearchModel"
 import { IMAGE_SIZE } from "app/Scenes/Search/components/SearchResultImage"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import {
   PlaceholderBox,
   PlaceholderRaggedText,
@@ -110,15 +118,28 @@ const CuratedCollectionsPlaceholder = () => {
 }
 
 export const SearchPlaceholder: React.FC = () => {
+  const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   return (
     <ProvidePlaceholderContext>
       <Box m={2} mb={0} testID="search-placeholder">
         {/* Search input */}
-        <PlaceholderBox height={50} />
+        {enableNewSearchModal ? (
+          <PlaceholderBox
+            height={SEARCH_INPUT_CONTAINER_HEIGHT}
+            borderRadius={SEARCH_INPUT_CONTAINER_BORDER_RADIUS}
+          />
+        ) : (
+          <PlaceholderBox height={50} />
+        )}
+
         <Spacer y={2} />
 
-        <RecentSearchesPlaceholder />
-        <Spacer y={4} />
+        {!enableNewSearchModal && (
+          <>
+            <RecentSearchesPlaceholder />
+            <Spacer y={4} />
+          </>
+        )}
 
         <TrendingArtistPlaceholder />
         <Spacer y={4} />

src/app/Scenes/SearchModal/SeachModal.tests.tsx

@@ -0,0 +1,10 @@
+import { SearchModalScreen } from "app/Scenes/SearchModal/SeachModal"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
+
+describe("SeachModal", () => {
+  it("renders the search label properly", () => {
+    renderWithWrappers(<SearchModalScreen />)
+
+    expect(/Search artists, artworks, etc/).toBeTruthy()
+  })
+})

src/app/Scenes/SearchModal/SeachModal.tsx

@@ -0,0 +1,27 @@
+import { Flex, RoundSearchInput, Screen, Spacer } from "@artsy/palette-mobile"
+import { SEARCH_INPUT_PLACEHOLDER } from "app/Scenes/Search/Search"
+import { goBack } from "app/system/navigation/navigate"
+
+export const SearchModalScreen = () => {
+  return (
+    <Screen>
+      <Flex px={2} pt={2}>
+        <RoundSearchInput
+          placeholder={SEARCH_INPUT_PLACEHOLDER}
+          accessibilityHint="Search artists, artworks, galleries etc."
+          accessibilityLabel="Search artists, artworks, galleries etc."
+          maxLength={55}
+          numberOfLines={1}
+          autoFocus
+          multiline={false}
+          onLeftIconPress={() => {
+            goBack()
+          }}
+        />
+      </Flex>
+      <Spacer y={2} />
+
+      <Flex flex={1} backgroundColor="black10" />
+    </Screen>
+  )
+}

src/app/routes.ts

@@ -323,6 +323,7 @@ export function getDomainMap(): Record<string, RouteMatcher[] | null> {
     addRoute("/recently-viewed", "RecentlyViewed"),
     addRoute("/sell", "Sell"),
     addRoute("/search", "Search"),
+    addRoute("/search/modal", "SearchModal"),
     addRoute("/sell/inquiry", "ConsignmentInquiry"),
     addRoute("/sell/submissions/new", "SubmitArtwork"),
     addRoute("/sell/submissions/:externalID/edit", "SubmitArtworkEdit"),

src/app/store/config/features.ts

@@ -306,6 +306,11 @@ export const features = {
     showInDevMenu: true,
     echoFlagKey: "AREnablePaymentFailureBanner",
   },
+  AREnableNewSearchModal: {
+    description: "Enable new search modal",
+    readyForRelease: false,
+    showInDevMenu: true,
+  },
 } satisfies { [key: string]: FeatureDescriptor }
 
 export interface DevToggleDescriptor {