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)
    }
}

Answer 1

The issues with your code are:

1. Your navigation view contains the search field. This means that any new view that gets pushed will cover the search field.
2. 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)
    }
}