diff --git a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
index b2d48d7cef4..1e1db040884 100644
--- a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
+++ b/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 ? (
) : (
diff --git a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx b/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx
index 9db13f5987e..410e95ee728 100644
--- a/packages/mobile/src/screens/search-screen-v2/SearchScreenV2.tsx
+++ b/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 = {
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(
- params?.category ?? 'all'
- )
- const [filters, setFilters] = useState(
- 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 (
+ }
+ headerTitle={null}
+ variant='white'
+ >
+
+
+ {!showSearchResults ? (
+
+ {showRecentSearches ? (
+ }
+ searchItems={filteredSearchItems}
+ />
+ ) : (
+
+ )}
+
+ ) : (
+
+ )}
+
+
+ )
+}
+
+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(
+ params?.category ?? 'all'
+ )
+ const [filters, setFilters] = useState(
+ 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 (
{
active: true
}}
>
- }
- headerTitle={null}
- variant='white'
- >
-
-
- {!showSearchResults ? (
-
- {showRecentSearches ? (
- }
- searchItems={filteredSearchItems}
- />
- ) : (
-
- )}
-
- ) : (
-
- )}
-
-
+
+
+
)
}
diff --git a/packages/mobile/src/screens/search-screen-v2/index.ts b/packages/mobile/src/screens/search-screen-v2/index.ts
index c31f88995da..06396dd1d55 100644
--- a/packages/mobile/src/screens/search-screen-v2/index.ts
+++ b/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'
diff --git a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx b/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx
index 98bf43623d5..408431ac54a 100644
--- a/packages/mobile/src/screens/search-screen-v2/search-results/AllResults.tsx
+++ b/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 ? (
-
-
-
+
) : (
)