TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Adding searchable affects position of child views

Forums > SwiftUI

I have a simple scenario. I have a list of values and I want to allow the user to search the vales and then tap on one to navigate to a detail view.

In a simplified example I add searchable to a navigation stack wrapping a list and I use a navigation link to display the child view.

struct ContentView: View {
    let names = ["Holly", "Josh", "Rhonda", "Ted"]
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            List {
                ForEach(searchResults, id: \.self) { name in
                    NavigationLink {
                        ZStack {
                            Color.red.frame(width: .infinity, height: .infinity)
                            Text(name)
                        }
                    } label: {
                        Text(name)
                    }
                }
            }![](https://)
            .searchable(text: $searchText)
        }
    }

    var searchResults: [String] {
        if searchText.isEmpty {
            return names
        } else {
            return names.filter { $0.contains(searchText) }
        }
    }
}

The list displays fine but when I navigate to the child there is a gap at the top of the screen were the search textfield was. Is there a way to get rid of this gap? Is this a bug? The only way I can find around it is to re-create the search field using a regular textfield and a bunch of code that handles things like dismissing the keyboard when I tap away, showing cancel etc. Seems like such a basic thing

2      

Not sure why it behaves that way but this is nav title that creates this issue. If you modify it to be .inline all is fine.

NavigationLink {
                        ZStack {
                            Color.red.frame(width: .infinity, height: .infinity)
                            Text(name)
                        }
                    } label: {
                        Text(name)
                    }
                    .navigationBarTitleDisplayMode(.inline) // <-- this line fix that

2      

Thank you. I had tried that but on the navigation stack instead of the navigation link and given up on it, but putting it on the link does the trick.

Noticed other odd things too. Like if the sarchbar does not have focus its slight moved down, if you scroll down the screen it hides search and you get a blurred area over the top were the navigation stack text would be.

2      

Hacking with Swift is sponsored by Superwall.

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.