iOS 11
customise search bar
navigation bar
iOS development
mobile app design

iOS 11 customise search bar in navigation bar

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

iOS 11 made UISearchController feel like a first-class part of navigation by letting it live directly in the navigation bar. The right way to customize it is to install the search controller on navigationItem and then change the supported public UISearchBar properties rather than trying to fight the internal layout.

Attach the Search Controller to the Navigation Item

In iOS 11, the basic setup looks like this:

swift
1import UIKit
2
3final class ResultsViewController: UITableViewController, UISearchResultsUpdating {
4    private let searchController = UISearchController(searchResultsController: nil)
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        navigationItem.searchController = searchController
10        navigationItem.hidesSearchBarWhenScrolling = false
11
12        searchController.searchResultsUpdater = self
13        searchController.obscuresBackgroundDuringPresentation = false
14        searchController.searchBar.placeholder = "Search products"
15
16        definesPresentationContext = true
17    }
18
19    func updateSearchResults(for searchController: UISearchController) {
20        let query = searchController.searchBar.text ?? ""
21        print("search:", query)
22    }
23}

The important pieces are navigationItem.searchController and definesPresentationContext. Without the presentation context, search presentation can behave oddly during navigation transitions.

Customize the Public Search Bar Properties

Once the search controller is installed, use the search bar’s public styling properties:

swift
1searchController.searchBar.placeholder = "Search orders"
2searchController.searchBar.searchBarStyle = .minimal
3searchController.searchBar.tintColor = .systemBlue
4searchController.searchBar.barStyle = .default

These properties are stable and supported. They let you control placeholder text, cancel-button tint, and the general search bar appearance without depending on private internals.

If you want the search bar to stay visible instead of collapsing when the table scrolls, keep:

swift
navigationItem.hidesSearchBarWhenScrolling = false

That one line changes the interaction model more than many visual tweaks do.

Customize Icons and Basic Visual Details

UISearchBar also lets you customize certain images using public API:

swift
if let image = UIImage(systemName: "magnifyingglass") {
    searchController.searchBar.setImage(image, for: .search, state: .normal)
}

This is useful for mild branding or aligning the control with the rest of the app’s iconography. Stay within the public API surface where possible, because the search bar’s internal hierarchy changed across iOS versions and private subview access is brittle.

Know the Limits of iOS 11 Customization

This is where many developers get frustrated. In iOS 11, the search bar inside a navigation bar is not meant to be completely custom-designed. You can style the supported properties, but aggressive customization such as manually resizing internal fields, replacing subviews, or applying KVC hacks to private implementation details tends to break across versions.

If you need a radically custom search UI, the more reliable option is often to place your own search field in a custom header or a custom navigation title view instead of forcing UISearchController beyond its intended boundaries.

Search Behavior Matters as Much as Appearance

Search integration is not only a styling problem. Decide whether:

  • the background should dim during search
  • the search bar should hide on scroll
  • results should update live while typing
  • the current screen or a separate results controller should display matches

Those behavior choices change the user experience more than small color adjustments do. In many apps, the best customization is simply a clear placeholder, immediate filtering, and predictable navigation behavior.

Common Pitfalls

The most common mistake is trying to customize the search bar by reaching into undocumented subviews. That can work briefly and then break on the next iOS update.

Another pitfall is forgetting definesPresentationContext, which can cause the search UI to present from the wrong visual context during pushes or modal transitions.

It is also easy to over-customize the control visually while ignoring search behavior. A polished search bar still feels broken if it obscures content unexpectedly or hides itself when the design expects it to stay visible.

Finally, if you truly need a fully custom search experience, forcing UISearchController to behave like a bespoke view is often harder than building the custom UI directly.

Summary

  • In iOS 11, place the search controller on navigationItem.searchController.
  • Customize supported UISearchBar properties instead of private internal views.
  • Use definesPresentationContext and hidesSearchBarWhenScrolling intentionally.
  • Public API supports useful visual tweaks such as placeholder text, style, tint, and icons.
  • If the design requires deep visual changes, a custom search UI is often more reliable than fighting UISearchController.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.