Conditionally searchable SwiftUI views
SwiftUI 3 added the searchable view modifier, which makes it possible to add a search field to any view. In this post, let’s take a look at how to make this (and any other) modifier conditional.
Using the searchable view modifier is really easy. You just have to provide it with a text binding, a placeholder prompt and an optional placement:
struct MyView: View {
@State
private var searchQuery = ""
List {
...
}.searchable(text: $searchQuery, prompt: "Search")
}
This will place a search bar above the list on iPhone and as a trailing navigation toolbar item on iPad, if you have a navigation bar. The standard modifier behavior is meant to fit each platform.
Making searchable conditional
In an app that I’m working on, I want a skeuomorphic user experience, which means that I want as little UI as possible. However, having a search bar can really help people find their content.
To take both the skeuomorphism as well as the potential search needs into consideration, I chose to make the search field optional, so that users with a lot of content can enable the search field.
To fix this, I decided to implement a conditional searchable modifier, that takes a boolean condition and either returns the plain view or a searchable variant, based on the condition.
This is by no means a sophisticated solution (I actually considered not writing this blog post), but it’s an approach that I often return to and one that perhaps can inspire you.
The extension is very basic:
@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
extension View {
@ViewBuilder
func searchable(
if condition: Bool,
text: Binding<String>,
placement: SearchFieldPlacement = .automatic,
prompt: String
) -> some View {
if condition {
self.searchable(
text: text,
placement: placement,
prompt: prompt
)
} else {
self
}
}
}
I have added this extension to SwiftUIKit. Feel free to try it out. If you think this is too basic content for this blog, let me know and I’ll refrain from writing these kind of trivial posts.
Important about conditional views
As Marco Eidinger points out on Twitter, conditional views must not be misused. Changing the condition will recreate the part of the hierarchy that is wrapped by the if/else clause, which will lead to animations breaking and other potential problems.
However, I think that this is something to be aware of and use when it makes sense, rather than to have a hard rule to never use conditional views.
In my case, the fact that users can toggle searchability on and off, will regadless involve either applying the searchable modifier or not, which means that a conditional view is inevitable.
A better approach would perhaps be if the searchable modifier had a hidden placement option. This would have let you change the behavior of the modifier instead of omitting it.
Just be careful and only use conditional modifiers them when you know the effect they will have and when it fits your use case.
Thanks Marco for pointing this out!
Discussion
If you found this post interesting and would like to share your thoughts, ideas, feedback etc. please comment in the Disqus section below or reply to this tweet.