How to: Add a search bar to NavigationView in SwiftUI

A fast way to add a search bar to your SwiftUI app with fuzzy search and NavigationView. (Bonus: becomeFirstResponder)

Gary Tokman
3 min readMar 13, 2021
NavigationView SearchBar Image
NavigationView SearchBar

Edit:

In the latest version of iOS 15 sdk, you can now use the .searchable(:) modifier to achieve search behavior. Only continue with this article if you need to support iOS 13 and higher!

This year, at the top of the WWDC wish list, is for the SwiftUI team to add a search bar to the framework. There are so many ways to add search today from using a TextField view to tapping into UIKit and using UISearchBar via UIViewRepresentable.

Nevertheless, it’s a hassle, but I’m going to show you how you can add it relatively fast using SwiftUIX. SwiftUIX is a library full of various views missing in the SwiftUI standard library, one of being a search bar. They’ve conveniently added a modifier to NavigationView that allows you to add a search bar and customize it with a few modifiers.

Under the hood it’s…

--

--