Unable to remove the space from navigation bar

App Development
1

I have successfully make an image tapable to direct it to other view by using Navigation Link and View. But there has the space around the Navigation Bar that I was unable to remove.

I have three different views. SwiftUI View which contain the image, List View and Detail View.
I need the Navigation Title on List and Detail View but it has double space on the Navigation area when tap from the image.

SwiftUI View Code

struct SwiftUIView: View {
var body: some View {

    NavigationView {
        ZStack {
            ScrollView {
                
                ZStack {
                    NavigationLink(destination: RecipeListView()) {
                        
                        VStack(spacing: 40){
                            Spacer()
                            Image("dessert")
                                .renderingMode(.original)
                                
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(height: 200, alignment: .bottom)
                                .cornerRadius(20)
                                .shadow(color: .gray, radius: 10, x: 0, y: 5)
                                .overlay(VStack {
                                    Spacer()
                                    Text("Yo")
                                        .padding(.bottom, 20)
                                        .opacity(0.85)
                                        .font(.system(size:30, weight: .black))
                                        .foregroundColor(.white)
                                })
                            
                        }.padding(.horizontal, 40)
                        
                    }
                }
                .edgesIgnoringSafeArea(.vertical)
            }
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }

}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}

List View Code

struct RecipeListView: View {

// Reference the view model
@ObservedObject var model = RecipeModel()

var body: some View {
    
    NavigationView {
        
        List(model.recipes) { r in
            
            NavigationLink(
                destination: RecipeDetailView(recipe:r),
                label: {
                    
                    // MARK: Row item
                    HStack(spacing: 20.0) {
                        Image(r.image)
                            .resizable()
                            .scaledToFill()
                            .frame(width: 50, height: 50, alignment: .center)
                            .clipped()
                            .cornerRadius(5)
                        Text(r.name)
                    }
                    
                })
            
            
            
        }
        .navigationBarTitle("All Recipes",displayMode: .inline)
        
        
    }
}

}

struct RecipeListView_Previews: PreviewProvider {
static var previews: some View {
RecipeListView()
}
}

Detail View Code

struct RecipeDetailView: View {

@Environment(\.presentationMode) var mode: Binding<PresentationMode>


var recipe:Recipe

var body: some View {

    ScrollView {
    
        VStack (alignment: .leading) {
            
            // MARK: Recipe Image
            Image(recipe.image)
                .resizable()
                .scaledToFill()
            
            VStack {
                Text("Servings:" + " " + recipe.servings)
                    .font(.headline)
                    .padding([.bottom, .top], 5)
            }
            .padding(.horizontal)
            
            // MARK: Ingredients
            VStack(alignment: .leading) {
                Text("Ingredients")
                    .font(.headline)
                    .padding([.bottom, .top], 5)
                
                ForEach (recipe.ingredients, id:\.self) { item in
                    Text("• " + item)
                }
            }
            .padding(.horizontal)
            
            // MARK: Divider
            Divider()
            
            // MARK: Directions
            VStack(alignment: .leading) {
                Text("Directions")
                    .font(.headline)
                    .padding([.bottom, .top], 5)
                
                ForEach(0..<recipe.directions.count, id: \.self) { index in
                    
                    Text(String(index+1) + ". " + recipe.directions[index])
                        .padding(.bottom, 5)
                }
            }
            .padding(.horizontal)
        }
        
        
    }
    .navigationBarTitle(recipe.name)
    .navigationBarBackButtonHidden(true)
                .navigationBarItems(leading: Button(action : {
                    self.mode.wrappedValue.dismiss()
                }){
                    Image(systemName: "arrow.left")
                        .foregroundColor(.black)
                })
   
}

}

struct RecipeDetailView_Previews: PreviewProvider {
static var previews: some View {

    // Create a dummy recipe and pass it into the detail view so that we can see a preview
    let model = RecipeModel()
    
    RecipeDetailView(recipe: model.recipes[0])
}

}

I had a custom NavigationBarButton on Detail View but it seem like when I tap on the image and move to List View, it will show the default Navigation Bar from List View and same issue when move from List View to Detail View. Is there anyway to show only one Navigation Bar on three Views?
Thank you.

2

When you say clickable, do you mean tappable, or are you coding for Mac OS? You if you mean tappable you could try a tap gesture recogniser. I haven’t learned SwiftUI yet, so I don’t about embedding navigation links.

3

Yes. It should be tapable. It is for iOS.

4

Show what you’ve tried. NavigationLink would be the way to go here, so we need to see what you tried that didn’t work in order to help you fix it.

6

I have update the question and the code. Thank you for the information.

7

Remove the NavigationView from RecipeListView; you already have a NavigationView in SwiftUIView so you don’t need it again.

And when posting code to these forums, place three backticks ``` on the line before your code and three backticks ``` on the line after your code so that it will be formatted properly. You can also highlight an entire code block and click the </> button on the toolbar to wrap the block for you.

This will ensure that your code is properly formatted, unlike how it currently is.

8

Thank you. It works. I will do the three backsticks next time