[QA-1501] Fix mobile search input

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -37,7 +37,7 @@ import {
 } from 'app/screens/search-results-screen'
 import { SearchScreen } from 'app/screens/search-screen'
 import type { SearchParams } from 'app/screens/search-screen-v2'
-import { SearchScreenV2 } from 'app/screens/search-screen-v2'
+import { SearchScreenStack } from 'app/screens/search-screen-v2'
 import {
   AboutScreen,
   AccountSettingsScreen,
@@ -223,8 +223,8 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
       {isSearchV2Enabled ? (
         <Stack.Screen
           name='Search'
-          component={SearchScreenV2}
-          options={screenOptions}
+          component={SearchScreenStack}
+          options={{ ...screenOptions, headerShown: false }}
         />
       ) : (
         <Stack.Group>

packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx

@@ -7,6 +7,7 @@ import type {
 import { Kind } from '@audius/common/models'
 import { searchSelectors } from '@audius/common/store'
 import { useFocusEffect } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import type { TextInput } from 'react-native/types'
 import { useSelector } from 'react-redux'
 import { useEffectOnce } from 'react-use'
@@ -15,12 +16,20 @@ import { Flex } from '@audius/harmony-native'
 import { Screen } from 'app/components/core'
 import { useRoute } from 'app/hooks/useRoute'
 
+import { useAppScreenOptions } from '../app-screen/useAppScreenOptions'
+
 import { RecentSearches } from './RecentSearches'
 import { SearchBarV2 } from './SearchBarV2'
 import { SearchCatalogTile } from './SearchCatalogTile'
 import { SearchCategoriesAndFilters } from './SearchCategoriesAndFilters'
 import { SearchResults } from './search-results/SearchResults'
-import { SearchContext } from './searchState'
+import {
+  SearchContext,
+  useSearchAutoFocus,
+  useSearchCategory,
+  useSearchFilters,
+  useSearchQuery
+} from './searchState'
 
 const { getV2SearchHistory } = searchSelectors
 
@@ -32,25 +41,11 @@ const itemKindByCategory: Record<SearchCategory, Kind | null> = {
   albums: Kind.COLLECTIONS
 }
 
-export const SearchScreenV2 = () => {
-  const { params } = useRoute<'Search'>()
-
-  const [autoFocus, setAutoFocus] = useState(params?.autoFocus ?? false)
-  const [query, setQuery] = useState(params?.query ?? '')
-  const [category, setCategory] = useState<SearchCategory>(
-    params?.category ?? 'all'
-  )
-  const [filters, setFilters] = useState<SearchFiltersType>(
-    params?.filters ?? {}
-  )
-  const [bpmType, setBpmType] = useState<'range' | 'target'>('range')
-
-  useEffect(() => {
-    setQuery(params?.query ?? '')
-    setCategory(params?.category ?? 'all')
-    setFilters(params?.filters ?? {})
-    setAutoFocus(params?.autoFocus ?? false)
-  }, [params])
+const SearchScreenV2 = () => {
+  const [query] = useSearchQuery()
+  const [category] = useSearchCategory()
+  const [filters] = useSearchFilters()
+  const [autoFocus, setAutoFocus] = useSearchAutoFocus()
 
   const history = useSelector(getV2SearchHistory)
   const categoryKind: Kind | null = category
@@ -84,6 +79,57 @@ export const SearchScreenV2 = () => {
     }, [autoFocus, refsSet, setAutoFocus])
   )
 
+  return (
+    <Screen
+      topbarRight={<SearchBarV2 ref={searchBarRef} autoFocus />}
+      headerTitle={null}
+      variant='white'
+    >
+      <SearchCategoriesAndFilters />
+      <Flex flex={1}>
+        {!showSearchResults ? (
+          <Flex direction='column' alignItems='center' gap='xl'>
+            {showRecentSearches ? (
+              <RecentSearches
+                ListHeaderComponent={<SearchCatalogTile />}
+                searchItems={filteredSearchItems}
+              />
+            ) : (
+              <SearchCatalogTile />
+            )}
+          </Flex>
+        ) : (
+          <SearchResults />
+        )}
+      </Flex>
+    </Screen>
+  )
+}
+
+const Stack = createNativeStackNavigator()
+
+export const SearchScreenStack = () => {
+  const { params } = useRoute<'Search'>()
+
+  const [autoFocus, setAutoFocus] = useState(params?.autoFocus ?? false)
+  const [query, setQuery] = useState(params?.query ?? '')
+  const [category, setCategory] = useState<SearchCategory>(
+    params?.category ?? 'all'
+  )
+  const [filters, setFilters] = useState<SearchFiltersType>(
+    params?.filters ?? {}
+  )
+  const [bpmType, setBpmType] = useState<'range' | 'target'>('range')
+
+  useEffect(() => {
+    setQuery(params?.query ?? '')
+    setCategory(params?.category ?? 'all')
+    setFilters(params?.filters ?? {})
+    setAutoFocus(params?.autoFocus ?? false)
+  }, [params])
+
+  const screenOptions = useAppScreenOptions()
+
   return (
     <SearchContext.Provider
       value={{
@@ -100,29 +146,9 @@ export const SearchScreenV2 = () => {
         active: true
       }}
     >
-      <Screen
-        topbarRight={<SearchBarV2 ref={searchBarRef} autoFocus />}
-        headerTitle={null}
-        variant='white'
-      >
-        <SearchCategoriesAndFilters />
-        <Flex flex={1}>
-          {!showSearchResults ? (
-            <Flex direction='column' alignItems='center' gap='xl'>
-              {showRecentSearches ? (
-                <RecentSearches
-                  ListHeaderComponent={<SearchCatalogTile />}
-                  searchItems={filteredSearchItems}
-                />
-              ) : (
-                <SearchCatalogTile />
-              )}
-            </Flex>
-          ) : (
-            <SearchResults />
-          )}
-        </Flex>
-      </Screen>
+      <Stack.Navigator screenOptions={screenOptions}>
+        <Stack.Screen name='SearchResults' component={SearchScreenV2} />
+      </Stack.Navigator>
     </SearchContext.Provider>
   )
 }

packages/mobile/src/screens/search-screen-v2/index.ts

@@ -1,2 +1,2 @@
-export { SearchScreenV2 } from './SearchScreenV2'
+export { SearchScreenStack } from './SearchScreenV2'
 export type { SearchParams } from './searchParams'

packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx

@@ -9,7 +9,7 @@ import { range } from 'lodash'
 import { Keyboard } from 'react-native'
 import { useDispatch } from 'react-redux'
 
-import { Box, Divider, Flex, Text } from '@audius/harmony-native'
+import { Divider, Flex, Text } from '@audius/harmony-native'
 import { SectionList } from 'app/components/core'
 import { make, track as record } from 'app/services/analytics'
 
@@ -63,9 +63,7 @@ const AllResultsItem = ({
   }, [item, dispatch, query])
 
   return item.status === Status.LOADING ? (
-    <Box ph='m'>
-      <SearchItemSkeleton />
-    </Box>
+    <SearchItemSkeleton />
   ) : (
     <SearchItem searchItem={item} onPress={handlePress} />
   )