I'm having some difficulty with a tabview and getting the new search bar to expand from the search icon.
The tabview works so far, it looks fine, tapping on the search opens the view I will be modifying to use the search bar.
snip from my tabview:
var body: some View {
TabView(selection: $selectedTab) {
Tab("Requests", systemImage: "list.bullet", value: .requests) {
OverseerrRequestView(integrationId: integrationId)
}
Tab("Users", systemImage: "person.3", value: .users) {
OverseerrUserView(integrationId: integrationId)
}
Tab("Search", systemImage: "magnifyingglass", value: .search, role: .search) {
NavigationStack {
OverseerrView(integrationId: integrationId)
.searchable(text: $searchString)
}
}
}
.modifier(TabBarMinimizeIfAvailable())
.navigationTitle("Overseerr")
.modifier(NavigationBarInlineIfAvailable())
}
Currently in that view, I have temporarily constructed a search bar that handles the search function (we're searching externally, not just contents in the view)
snip from my view:
.safeAreaInset(edge: .bottom) {
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.secondary)
TextField("Search movies, TV or people", text: $query)
.focused($isSearchFieldFocused)
.onSubmit {
Task { await performSearch() }
}
.submitLabel(.search)
.padding(.vertical, 8)
.padding(.horizontal, 4)
if !query.isEmpty {
Button(action: {
query = ""
searchResults = []
Task { await loadTrending() }
}) {
Image(systemName: "xmark.circle.fill")
.foregroundColor(.secondary)
}
}
}
.padding(.horizontal)
.padding(.vertical, 5)
.adaptiveGlass()
.shadow(radius: 8)
.onAppear {
isSearchFieldFocused = false
}
}
Notes: .adaptiveGlass() is a modifier I created to easily apply liquid glass or not depending on OS version, so as not to require the use of #if or #available in the views.
The end goal here:
have the tab view search "tab" open the OverseerrView.swift (Discover) view, activate the animated search bar, and search the input text to the performSearch() function.
I have similar needs on other tab views, and am trying to move away from needing to manually create a search bar, when one should work from the .search role.
Is there an example project with this search in the tab that I can reference? the landmarks sample project sadly did not include one.
4
0
266