GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

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 RevenueCat.

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure and A/B test your entire paywall UI without any code changes or app updates.

Learn more here

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.