Show search bar in navigation bar without scrolling on iOS 11

Question

I’m attaching a UISearchController to the navigationItem.searchController property of a UITableViewController on iOS 11. This works fine: I can use the nice iOS 11-style search bar.

However, I’d like to make the search bar visible on launch. By default, the user has to scroll up in the table view to see the search bar. Does anyone know how is this is possible?

Left: default situation after launch. Right: search bar made visible (by scrolling up). I’d like to have the search bar visible after launch, as in the right screenshot.

I already found that the search bar can be made visible by setting the property hidesSearchBarWhenScrolling of my navigation item to false. However, this causes the search bar to always be visible — even when scrolling down —, which is not what I want.

The selected answer below works for me on load, but I'd also like to re-display the Search Controller when programmatically scrolling to the top with `scrollView.setContentOffset(_:animated)`. Anyone have a suggestion? — Justin Vallely, Jul 23 '18 at 22:11
@Jonathan `hidesSearchBarWhenScrolling = false` puts the search bar over large title in iOS 13. Any idea if I can update this somehow? — Bonnke, Nov 05 '19 at 20:59

score 207 · Accepted Answer · edited Jun 04 '20 at 15:44

207

The following makes the search bar visible at first, then allows it to hide when scrolling:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    if #available(iOS 11.0, *) {
        navigationItem.hidesSearchBarWhenScrolling = false
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    if #available(iOS 11.0, *) {
        navigationItem.hidesSearchBarWhenScrolling = true
    }
}

Using isActive didn't do what I wanted, it makes the search bar active (showing cancel button, etc.), when all I want is for it to be visible.

edited Jun 04 '20 at 15:44

Gobe

2,559
1
25
24

answered Sep 21 '17 at 19:55

Jordan Wood

2,727
3
12
17

Thanks, worked for me. Interesting solution though :) – Mikrasya Oct 13 '17 at 05:42
Perfect! Thanks! – David Vincent Gagne Dec 08 '17 at 21:15
10

This solution works, but there are side effects if you are also displaying a navigation bar if it was previously hidden (i.e. pushing this view w/ search bar onto the navigation stack) The search bar will appear static in place as the navigation bar animates. Looks awful :( – Matthew Crenshaw Dec 11 '17 at 18:04
14

Not if you put the first part in `viewDidLoad` instead of `viewWillAppear` – Marc-Alexandre Bérubé Jun 07 '18 at 14:09
1

Can someone please elaborate on why this works and why `searchController.searchBar.isHidden = false` in viewDidLoad does not? The latter seems far more logical to me – pho_pho Oct 22 '18 at 21:49
8

This causes visual bug in iOS 13 on going back from child screen. – nemissm Oct 24 '19 at 13:58
Is there a way to overcome the visual bug that this idea brings? The tableView 'jumps' when getting back from the child screen. The issue happens only if the view is scrolled from the top and the child view is opened and then closed. – timetraveler90 Sep 29 '21 at 21:11

score 6 · Answer 2 · edited Mar 09 '19 at 07:29

6

You can set the property isActive to true after adding the searchController to the navigationItem.

Just like this:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    searchController.isActive = true
}

edited Mar 09 '19 at 07:29

craft

2,017
1
21
30

answered Sep 20 '17 at 04:12

txaidw

485
4
13

No setter method 'setIsActive:' – Nikolay Krasnov Nov 07 '17 at 12:23
You're right, @NikolayKrasnov. `isActive` is a read-only boolean. You will want to use `searchController.active = true`, instead. – Mark Jeschke Aug 24 '18 at 17:48

score 5 · Answer 3 · edited Apr 27 '20 at 06:31

5

For me it worked after adding following lines in viewDidLoad() method:

navigationController?.navigationBar.prefersLargeTitles = true
navigationController!.navigationBar.sizeToFit()

edited Apr 27 '20 at 06:31

Bùi Đức Khánh

3,975
6
27
43

answered Apr 26 '20 at 23:13

rohit

103
1
7

score 3 · Answer 4 · answered Jul 12 '20 at 17:50

3

On iOS 13, @Jordan Wood's answer didn't work. Instead I did:

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    UIView.performWithoutAnimation {
        searchController.isActive = true
        searchController.isActive = false
    }
}

answered Jul 12 '20 at 17:50

GaétanZ

4,870
1
23
30

Almost! The search bar animates to become visible after the view appears. This will annoy users. :( – Rakesha Shastri Jan 24 '22 at 10:14

score 1 · Answer 5 · answered Aug 31 '23 at 09:25

@JordanWood's answer caused a visual bug when popping VC from navigation stack back to the screen with SearchBar, so i came up with solution that fixed it

private var collectionViewContentOffset: CGPoint?

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    navigationItem.hidesSearchBarWhenScrolling = false
    collectionView.setContentOffset(
        collectionViewContentOffset ?? .zero,
        animated: false
    )
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    navigationItem.hidesSearchBarWhenScrolling = true
    if collectionViewContentOffset == nil {
        collectionViewContentOffset = CGPoint(
            x: 0,
            y: -view.safeAreaInsets.top
        )
    }
    
}

score 0 · Answer 6 · answered May 27 '21 at 11:14

For (iOS 13.0, *) and SwiftUI

navigationController?.navigationBar.sizeToFit()

Example:

struct SearchBarModifier: ViewModifier {
        let searchBar: SearchBar
        func body(content: Content) -> some View {
        content
            .overlay(
                ViewControllerResolver { viewController in
                    viewController.navigationItem.searchController = self.searchBar.searchController
                    viewController.navigationController?.navigationBar.sizeToFit()

                }
                .frame(width: 0, height: 0)
            )
    }
}

Show search bar in navigation bar without scrolling on iOS 11

6 Answers6

Linked