NavigationLink keeps aligning my text elements to center instead of leading SwiftUI

Question

I have a CustomSearchBar view that looks like this

However, when I wrap it with NavigationLink, the placeholder text will be centered. And user inputs will be centered too.

How do I maintain the leading alignment while using NavigationLink?

My code structure looks like this:

enum Tab {
 case social
}

struct MainAppView: View {
    @State var selection: Tab = .social
    var body: some View {
        TabView(selection: $selection) {
            ZStack{
                CustomButton()
                NavigationView { SocialView() }
               
            }.tabItem{Image(systemName: "person.2")}.tag(Tab.social)
            // other tabs....
        }

struct SocialView: View {
    // ...
    var body: some View {
        GeometryReader{ geometry in
            VStack{
                NavigationLink(destination: Text("test")) {  
                    CustomSearchBar()
                      //...
                    }.navigationBarHidden(true)
                    .navigationBarTitle(Text(""))
            }
        }
    }
}


struct CustomSearchBar: View {
    
    var body: some View {
        VStack{
            HStack {
                SearchBarSymbols(// some binding arguments)
                CustomTextField(// some binding arguments)
                CancelButton(// some binding arguments)
                }
                .padding(.vertical, 8.0)
                .padding(.horizontal, 10.0)
                .background(Color("SearchBarBackgroundColor"))
                .clipShape(Capsule())
            }
            .padding(.horizontal)
         }
    }

struct CustomTextField: View {

    var body: some View {
        TextField("friend name", text: $searchText)
                .frame(alignment: .leading)
                .onTapGesture {
                    // some actions
                }
                .foregroundColor(Color("SearchBarSymbolColor"))
                .accentColor(Color("SearchBarSymbolColor"))
                .disableAutocorrection(true)
    }
}

Why did you put search bar inside navigation link? On which user action it should navigate? — Asperi, Nov 04 '21 at 17:38
It will navigate to a dedicated search page. See UberEats app for example. — PipEvangelist, Nov 04 '21 at 17:40
Then why have a `TextField` in it? You have essentially turned a `TextField` into a `Button`. I suspect you want to take the input and cause a navigation to your search page with the input supplying the search page with needed information? If that is so, you should look up programmatically triggering a `NavigationLink`. — Yrb, Nov 04 '21 at 18:52

score 1 · Accepted Answer · answered Nov 04 '21 at 19:49

The issues with your code are:

Your navigation view contains the search field. This means that any new view that gets pushed will cover the search field.
Your search field is inside of the navigation link. There are conflicting interactions here as it effectively turns the field into a button, ie tapping the search field vs tapping the navigation link.

Solution:

Move the navigation view below the text field, so that the new view will appear without covering it. Then change the navigation link so that it is activated via a binding that gets triggered when the search field is editing:

struct SocialView: View {
    @State private var text: String = ""
    @State private var isActive: Bool = false

    var body: some View {
        GeometryReader{ geometry in
            VStack {
                CustomTextField(searchText: $text, isActive: $isActive)
                    .padding(.vertical, 8.0)
                    .padding(.horizontal, 10.0)
                    .background(Color("SearchBarBackgroundColor"))
                    .clipShape(Capsule())

                NavigationView {
                    NavigationLink(isActive: $isActive, destination: { Text("test") }, label: { EmptyView() })
                }
            }
        }
    }
}

struct CustomTextField: View {
    @Binding var searchText: String
    @Binding var isActive: Bool

    var body: some View {
        TextField("friend name", text: $searchText) { editing in
            self.isActive = editing
        } onCommit: {

        }
        .frame(alignment: .leading)
        .disableAutocorrection(true)
    }
}

NavigationLink keeps aligning my text elements to center instead of leading SwiftUI

1 Answers1