I'm building a simple project in swiftUI where I have a view that is displayed after I click on a navigation link with this being the result:

As you can see the image sits under the back button, but I would like it to be behind it and take the space of the notch. Still with the back button on it. This was the original code:

List{
            ZStack (alignment: .bottom){
                Image(drink.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)

                Rectangle()
                    .frame(height:80)
                    .opacity(0.5)
                    .blur(radius: 10)

                HStack{

                    VStack(alignment: .leading, spacing: 8){

                        Text(drink.name)
                            .font(.largeTitle)
                            .foregroundColor(.white)

                    }
                    .padding(.leading)
                    .padding(.bottom)
                    Spacer()
                }
            }
            .listRowInsets(EdgeInsets())

           VStack (alignment: .leading){
                Text(drink.description)

                HStack {

                    Spacer()

                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
                        Text("Order it")
                    })
                    .frame(width: 150, height:50)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .font(.headline)
                    .cornerRadius(10 )

                    Spacer()
                }.padding(.top, 50)
            }.padding(.top,15)

        }

I tried to add:

.edgesIgnoringSafeArea(.all) .navigationBarHidden(true)

after the List construct which brought me to this result:

So as you can see the image now is taking the space that was previously occupied by the navbar but it's still leaving white space in the notch zone. Plus because of .navigationBarHidden(true) there is no back button and because of that I can't come back to the original view. I would like to still have the back button but placed on top of the image. Not having the image under it

Thank you so much

Try using this instead. You will need to find the right place to put it (which View or frame it needs to affect)

.ignoresSafeArea(edges: .top)

BTW - no images are shown in your question, just the word photo.

Thanks and sorry. I eventually figured out how to do that by putting the ZStack outside of the list and turn the list into a scroll view then do some tweaks to the zstack and the image. Unfortunately now the image doesn't slide anymore while the text with the button does (as supposed to because they're in a scroll view) which gives the image a bouncing effect that might be cool. Here's the code:

 ZStack (alignment: .bottom){
            Image(drink.imageName)
                .resizable()
                .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)

            Rectangle()
                .frame(height:80)
                .opacity(0.5)
                .blur(radius: 10)

            HStack{

                VStack(alignment: .leading, spacing: 8){

                    Text(drink.name)
                        .font(.largeTitle)
                        .foregroundColor(.white)

                }
                .padding(.leading)
                .padding(.bottom)
                Spacer()
            }
        }
        .frame(height:100)
        .listRowInsets(EdgeInsets())

        ScrollView{

            VStack (alignment: .leading){
                Text(drink.description)

                HStack {

                    Spacer()

                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
                        Text("Order it")
                    })
                    .frame(width: 150, height:50)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .font(.headline)
                    .cornerRadius(10 )

                    Spacer()
                }.padding(.top, 50)
            }.padding()}

        /*.edgesIgnoringSafeArea(.all)
         .navigationBarHidden(true)*/
        //.ignoresSafeArea(edges: .top)

    }