SwiftUI - i'd like to remove space between "back button" and .navigationbartitle

Question

i would like to remove the space between my back button ("Rezept hinzufügen") and my navigationbarTitle ("Suche")... I cant figure out why this space is there so i need your swarm intelligence. :)

What did i try?

1. Working with a ZStack, maybe there is NavigationView from before which is doin this bug
2. Add Spacer()
3. Recreate the whole view

Now I stuck...

I think the easiest way is to show you my problem with an video...

Here you can see my problem

Here is my code...

import SwiftUI
extension UIApplication
{
    func endEditing(_force : Bool)
    {
        self.windows
            .filter{$0.isKeyWindow}
            .first?
            .endEditing(_force)
    }
}

struct ResignKeyboardOnDragGesture: ViewModifier
{
    var gesture = DragGesture().onChanged{_ in UIApplication.shared.endEditing(_force: true)}
    
    func body(content: Content) -> some View
    {
        content.gesture(gesture)
    }
}

extension View
{
    func resignKeyboardOnDragGesture() -> some View
    {
        return modifier(ResignKeyboardOnDragGesture())
    }
}
/*
    Zutaten pflegen Button, zum hinzufügen von Zutaten zu einem Rezept.
 **/
struct RecipeIngredientsView: View {
    let myArray = ["Dennis", "Tessa", "Peter", "Anna", "Tessa", "Klaus", "Xyan", "Zuhau", "Clown", "Brot", "Bauer"]
    @State private var searchText = ""
    @State private var showCancelButton: Bool = false
    
    var body: some View {
        NavigationView
        {
            VStack
            {
                HStack
                {
                    HStack
                    {
                        Image(systemName: "magnifyingglass")
                        TextField("Suche", text: $searchText, onEditingChanged: { isEditing in self.showCancelButton = true}, onCommit: {
                            print("onCommit")
                        }).foregroundColor(.primary)
                        
                        Button(action: {
                            self.searchText = searchText
                            }){
                            Image(systemName: "xmark.circle.fill").opacity(searchText == "" ? 0 : 1)
                            }
                    }.padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
                    .foregroundColor(.secondary)
                    .background(Color(.secondarySystemBackground))
                    .cornerRadius(10.0)
                    
                    if showCancelButton {
                        Button("Abbrechen")
                            {
                            UIApplication.shared.endEditing(_force: true)
                            self.searchText = ""
                            self.showCancelButton = false
                            }
                        .foregroundColor(Color(.systemBlue))
                    }
                }
                .padding(.horizontal)
                .navigationBarHidden(showCancelButton)
                
                //Gefilterte Liste der Namen aus meinem Array
                List {
                    ForEach(myArray.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self)
                        {
                        searchText in Text(searchText)
                    }
                }
                .navigationBarTitle(Text("Suche"))
                .resignKeyboardOnDragGesture()
                
            }
        }
    }
}

Thanks for your help! :-)

Answer 1

Just remove redundant NavigationView - it is needed only one in same view hierarchy, and obviously there is already some in parent view

struct RecipeIngredientsView: View {
    let myArray = ["Dennis", "Tessa", "Peter", "Anna", "Tessa", "Klaus", "Xyan", "Zuhau", "Clown", "Brot", "Bauer"]
    @State private var searchText = ""
    @State private var showCancelButton: Bool = false
    
    var body: some View {
        NavigationView         // << remove this one !!
        {