UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

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 Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

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.