CODEWITHSUNDEEP
iosswiftuiios15
Andrei Matei
Andrei Matei

Reputation: 1079

How to make search bar in iOS 15 appear by default?

I started to develop an application using iOS15 and the new .searchable modifier.

I have a simple layout with some placeholder results on the main page and a search field attached to the navigationBar.

Currently, if the user loads the page and looks at the results (even scrolls a bit) will not be able find the search field as it's hidden by default. The user needs to scroll in reverse for the search bar to appear.

How is this a good for UX?

The only workaround is the drawer placement with .always, but that will make the navigation title inline.

I really want to achieve the result from the Notes app, that has the search bar visible all the time.

Any workaround? Was this feature really tested by anyone in a real app?

What I want: What I want

What I get: What I get

Upvotes: 0

Views: 830

Answers (1)

cole
cole

Reputation: 1273

You need to set the NavigationBarDrawerDisplayMode for the searchable modifier. By default it's set to .automatic.

public struct NavigationBarDrawerDisplayMode {

    /// Allow the search field to be collapsed as the user scrolls
    /// their content.
    public static let automatic: SearchFieldPlacement.NavigationBarDrawerDisplayMode

    /// Always display the search field no matter the scroll position of
    /// the user's content.
    public static let always: SearchFieldPlacement.NavigationBarDrawerDisplayMode
}

The usage would be as follows.

.searchable(
    text: $search, 
    placement: .navigationBarDrawer(displayMode: .always), 
    prompt: "Search"
)

Upvotes: 2

Related Questions