How can I achieve the same search behaviour as in iOS 26 Wallet app?

Question

So in iOS 26, the search field changed a bit where it can be at the bottom. While other apps have the search in the nav bar, wallet has it in the toolbar, so when it's pressed it changes to a different view with the Search field at the bottom.

var body: some View {
        NavigationStack {
            ScrollView {
                VStack(alignment: .leading, spacing: 8) {
                    Text("Suggestions")
                        .font(.system(size: 16, weight: .semibold))
                        .foregroundColor(.white)
                    ForEach(1...20, id: \.self) { index in
                        Text("Item \\(index)")
                            .foregroundColor(.white)
                    }
                }
                .padding(.top, 16)
                .padding(.horizontal, 16)
            }
            .searchable(
                text: $searchText,
                placement: .navigationBarDrawer,
                prompt: "Search airlines & airports"
            )
        }
    }

So this is the current code I have for it. .navigationBarDrawer still places it at the top.

ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: ExploreSearchView()) {
                        Image(systemName: "magnifyingglass")
                            .font(.system(size: 17, weight: .bold))
                    }
                    .padding(.horizontal, 4)
                }

And this is my toolbar item which would open this. I want it to also fade in like in the wallet app instead of slide in and when the user dismisses the search, then fade out the suggestions screen.

Below are the images of how mine looks with the search at the top vs the search at the bottom like in Apple Wallet. Thanks!

Image of how my UI looks with searchbar at the top

Image of Apple Wallet UI with search bar at the bottom

Answer 1 · 2025-11-24 18:43:33Z

Benzy Neez

• Nov 24 at 18:43

If you don't want a sliding transition then I would suggest, not using a NavigationLink. You could show the search view as the top layer in a ZStack instead.

To move the location of the search field, try using DefaultToolbarItem. Something like:

ScrollView {
    // ... as before
}
.toolbar {
    DefaultToolbarItem(kind: .search, placement: .bottomBar) // 👈 here
}
.searchable(
    // ... as before
)

Collectives™ on Stack Overflow

How can I achieve the same search behaviour as in iOS 26 Wallet app?

1 Reply 1

Your Reply

Collectives™ on Stack Overflow

How can I achieve the same search behaviour as in iOS 26 Wallet app?

1 Reply 1

Your Reply

Sign up or log in

Post as a guest