Context

In my Developer journey using SwiftUI in developing SlidesOnTV and KeyChainX I’ve dealt with adding search bar on top of list, grid, etc…

In these cases I’ve always ask to myself a question:

have I to use native widget or I’ve to implement a completely new widget from scratch using SwiftUi ?

But since I’m a (very) lazy developer I decided to reuse the native widget thinking that it would have been easier solution, unfortunately It would haven’t been so.

For this reason I’ve decided to write this article for sharing my experience hoping that this could help other lazy developers like me.

Solution Design

My solution design consists in implementing a search bar as swiftui container (ie. using a @viewbuilder) so we’ll define the search bar and also the view where the search result will be applied.

SearchBar(text: $searchText ) {
     List {
         ForEach( (1...50)
                .map( { "Item\($0)" } )
                .filter({ $0.starts(with: searchText)}), id: \.self) { item in
             Text("\(item)")
         }
    }
 }

iOS implementation

UIKit Search Bar behaviour

Let’s start, beginning with iOS where the native widget is UISearchBox. UIKit offers a pretty convenient way to implement a native search bar embedded into the navigation bar. In a typical UINavigationController a navigation stack, each UIViewController has a corresponding UINavigationItem that has a property called searchController.

The SwiftUI challenges

Looking for a UINavigationController instance

The challenge here in SwiftUI is to hook up a UISearchController instance to a UINavigationController, so you can get all the iOS native search bar features with a single line of code.

But, how could I achieve this ? It was enough for me follow this amazing article where I’ve understood that “behind the SwiftUI NavigationView there is the good old UINavigationController from UIKit”.

Hooking up UISearchController to a NavigationView

Since, as said, behind the SwiftUI NavigationView there is a UINavigationController instance we can start development following steps below:

1. create a new UIViewController that hold an instance of UISearchController

 class SearchBarViewController : UIViewController {

    let searchController: UISearchController

    init( searchController:UISearchController ) {
        self.searchController = searchController
        super.init(nibName: nil, bundle: nil)
    }
    // Continue ...
 }

2. Hook up the UISearchController to the UINavigationController

To do this we’ve to find a way to handle when SearchBarViewController will be attached to UINavigationController (behind NavigationView) and hook up the UISearchController to the UINavigationController through the navigationItem.searchController property. An easy way is overridden the UIViewController lifecycle method named didMove:

override func didMove(toParent parent: UIViewController?) {
    super.didMove(toParent: parent)

    guard let parent = parent,
          parent.navigationItem.searchController == nil else {
            return
    }

    parent.navigationItem.searchController = searchController
}

3. Add an UIViewControllerRepresentable to manage SearchBarViewController

We have to add an UIViewControllerRepresentable named SearchBar that create a SearchBarViewController instance and hold a @Binding string variable that will be used to handle the search text update events:

 struct SearchBar: UIViewControllerRepresentable {

    typealias UIViewControllerType = SearchBarViewController

    @Binding var text: String

    class Coordinator: NSObject, UISearchResultsUpdating {

        @Binding var text: String

        init(text: Binding<String>) {
            _text = text
        }

        func updateSearchResults(for searchController: UISearchController) {

            if( self.text != searchController.searchBar.text ) {
                self.text = searchController.searchBar.text ?? ""
            }
        }
    }

    func makeCoordinator() -> SearchBar.Coordinator {
        return Coordinator(text: $text)
    }

    func makeUIViewController(context: UIViewControllerRepresentableContext<SearchBar>) -> UIViewControllerType {

        let searchController =  UISearchController(searchResultsController: nil)
        searchController.searchResultsUpdater = context.coordinator

        return SearchBarViewController( searchController:searchController )
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: UIViewControllerRepresentableContext<SearchBar>) {
    }
}

Enable SearchBar to be a SwiftUI container

Cool.. we have a first draft of implementation but we miss an important part the new created Widget isn’t a SwiftUI container so it doesn’t manage Sub Views Content. To do this we can use the magic @ViewBuilder the custom parameter attribute that constructs views from closures, however we proceed with order following the steps below:

1. Update SearchBarViewController implementation

First we’ve to update the SearchBarViewController enabling it to manage SwiftUI View as a new attribute.

class SearchBarViewController<Content:View> : UIViewController {

    let searchController: UISearchController
    let contentViewController: UIHostingController<Content>

    init( searchController:UISearchController, withContent content:Content ) {

        self.contentViewController = UIHostingController( rootView: content )
        self.searchController = searchController

        super.init(nibName: nil, bundle: nil)
    }
    // Continue
}
2. Got a UIView from SwiftUI View

Since it is not possible maps a SwiftUI View to an UIView we have to use UIHostingController that is able to create a UIViewController from a SwiftUI View then we can got a UIView and adding it as sub view to the SearchBarViewController views hierarchy.

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(contentViewController.view)
    contentViewController.view.frame = view.bounds
}
3. Update SearchBar Implementation

Lets add to SearchBar, our UIViewControllerRepresentable, a new attribute qualified as @ViewBuilder that hold the closure producing the contained SwiftUI View and evaluate such closure to initialize SearchBarViewController

struct SearchBar<Content: View>: UIViewControllerRepresentable {

    typealias UIViewControllerType = SearchBarViewController<Content>

    @Binding var text: String
    @ViewBuilder var content: () -> Content  // closure that produce SwiftUI content

    class Coordinator: NSObject, UISearchResultsUpdating { ... }

    func makeCoordinator() -> SearchBar.Coordinator { ... }

    func makeUIViewController(context: UIViewControllerRepresentableContext<SearchBar>) -> UIViewControllerType {

      let searchController =  UISearchController(searchResultsController: nil)
      searchController.searchResultsUpdater = context.coordinator

      return SearchBarViewController( searchController:searchController, withContent: content() )
    }

    // Continue
}
4. update Content

While in the first implementation of SearchBar we have ignored implementation of updateUIViewController now, since we are managing the SwiftUI content, it is not possible anymore. The updateUIViewController is automatically called by SwiftUI when an update is required and as consequence we have to re-evaluate content closure passing it to the SearchBarViewController

func updateUIViewController(_ uiViewController: UIViewControllerType, context: UIViewControllerRepresentableContext<SearchBar>) {

  let contentViewController = uiViewController.contentViewController  // get reference to UIHostingController

  contentViewController.view.removeFromSuperview() // remove previous content
  contentViewController.rootView = content() // assign fresh content to UIHostingController
  uiViewController.view.addSubview(contentViewController.view) // add produced UIView
  contentViewController.view.frame = uiViewController.view.bounds // update view geometry

}

Put all together

Finally we have finished and we can put all together as reported below


struct ContentView: View {
    @State var searchText = ""
    var body: some View {
        NavigationView {
            SearchBar(text: $searchText ) {
                List {
                  ForEach( (1...50)
                              .map( { "Item\($0)" } )
                              .filter({ $0.starts(with: searchText)}), id: \.self) { item in
                      Text("\(item)")
                  }

                }
            }.navigationTitle("Search Bar Test")
        }
    }
}

Conclusion

I’ve also implemented a search bar for tvOS but I’ll explain how in another article, however the complete code is on github.

Hope this could help someone, in the meanwhile Happy coding 👋

References