UI element with onTapGesture function does not work Swift - swift

Question

I use a systemImage, with a onTapGesture function attached to it, to switch a boolean Variable to true. When that boolean variable is true, the view is changed. I positioned that systemImage at the top left part of the screen, using position(x:,y:) function. However, onTapGesture does not work when the value for "y" is bellow 100.
The code:
import SwiftUI
import FirebaseFirestoreSwift
import Firebase
struct ChatView: View {
#Environment(\.presentationMode) var presentationMode
#StateObject var homeData:HomeModel
#State var queryView:Bool = false
#EnvironmentObject var model:ContentModel
var user = Auth.auth().currentUser
let db = Firestore.firestore()
//If it is the first time when user scrolls
#State var scrolled = false
// #GestureState var isLongPressed = false
var body: some View {
if queryView == false {
VStack(spacing: 0) {
Text("\(homeData.query) Global Chat").foregroundColor(Color(#colorLiteral(red: 0.5951357484, green: 0.5694860816, blue: 1, alpha: 1))).font(.title3).padding(.top, 30)
Text("Welcome \(model.firstName) \(model.secondName) !").foregroundColor(Color(#colorLiteral(red: 0.5951357484, green: 0.5694860816, blue: 1, alpha: 1))).font(.callout)
Image(systemName: "arrow.backward.square")
.position(x: 30, y: 0)
.foregroundColor(Color(#colorLiteral(red: 0.5951357484, green: 0.5694860816, blue: 1, alpha: 1)))
.font(.system(size: 30, weight: .regular))
.onTapGesture {
withAnimation(.easeOut) {
queryView = true
}
print("TAPPED")
}
ScrollViewReader { reader in
ScrollView{
VStack(spacing: 15) {
ForEach(homeData.msgs) { msg in
ChatRow(chatData: msg, firstName: model.firstName, secondName: model.secondName).onAppear(){
if msg.id == self.homeData.msgs.last!.id && !scrolled {
reader.scrollTo(homeData.msgs.last!.id, anchor: .bottom)
scrolled = true
}
// print(model.firstName)
// print(model.secondName)
}
}.onChange(of: homeData.msgs) { value in
reader.scrollTo(homeData.msgs.last!.id, anchor: .bottom)
}
}
}.padding(.vertical)
}.frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height - 135)
HStack(spacing:15) {
TextField("Enter message", text: $homeData.txt)
.padding(.horizontal)
//Fixed height for animation...
.frame(height: 45)
.foregroundColor(Color(.black))
.background(Color(#colorLiteral(red: 0.5951357484, green: 0.5694860816, blue: 1, alpha: 1)).opacity(1.0))
.clipShape(Capsule())
if homeData.txt != "" {
Button {
homeData.writeAllMessages()
} label: {
Image(systemName: "paperplane.fill")
.font(.system(size: 22))
.foregroundColor(.white)
.frame(width: 45, height: 45)
.background(Color(#colorLiteral(red: 0.5951357484, green: 0.5694860816, blue: 1, alpha: 1)))
.clipShape(Circle())
}
}
}.animation(.default)
.padding()
Spacer().frame(height: 100)
}.background(Color(.black).scaledToFill().frame(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height).ignoresSafeArea())
.navigationBarBackButtonHidden(true)
} else {
QueryView(query: homeData.query)
}
}
}
What shall I do in order to make that TapGesture work anywhere on the screen?
To provide more info,I use the systemImage with that tapgesture function because when I use the NavigationLink back button the transition to its parent view is too slow and laggy.

Answer 1

It's probably because the NavigationBar is still at the top of your View even though the Back button is hidden.
Try adding .navigationBarHidden(true) instead of .navigationBarBackButtonHidden(true).