Swipe back gesture like in without navigationView in SwiftUI - swift

Question

I am trying to create a simply game in SwiftUI and im trying to get a swipe back gesture similar to that on navigationView but without putting my view inside a navigationView. Since this is a game, adding naviagationView will look out of place.
This is what I have so far:
struct SwipingView : View {
#State private var dragAmount = CGSize.zero
#GestureState private var position = CGSize.zero
func addToPosition(translation:CGSize) -> CGSize {
return CGSize(width: dragAmount.width + translation.width, height: dragAmount.height + translation.height)
}
var body: some View{
return ZStack(){
Rectangle().fill(Color.red).frame(width: 100, height:400).scaleEffect(x:5,y:1,anchor: .leading)
.offset(x: 190)
.offset(x: addToPosition(translation: position).width )
.gesture(
DragGesture(minimumDistance: 20)
.updating(self.$position){ value, state, translation in
state = value.translation
}
.onEnded{ value in
if value.translation.width > 50 {
guard position.width + self.addToPosition(translation: CGSize(width:330, height:0)).width < 330-1 else {
return print("too far right")
}
self.dragAmount = self.addToPosition(translation: CGSize(width:330, height:0))
} else {
guard position.width + self.addToPosition(translation: CGSize(width:-330, height:0)).width > -330-1 else {
return print("too far left")
}
self.dragAmount = self.addToPosition(translation: CGSize(width:-330, height:0))
}
}
)
}.animation(Animation.linear)
}
}
I'm still new to swift so there is likely something obvious im missing even though I've looked through stack overflow and couldn't find exactly what im looking for.
This is what it looks like. As you can see, I can swipe the view away from anywhere on the view, but I'd like to only swipe away on the left edge or even just the first 5% on the left.

Answer 1

Here is possible solution - the idea is to attach gesture to overlay that is as wide at the left as needed. Tested with Xcode 12 / iOS 14
Note: on demo the active area made Color.blue instead of Color.clear for better visibility
struct SwipingView : View {
#State private var dragAmount = CGSize.zero
#GestureState private var position = CGSize.zero
func addToPosition(translation:CGSize) -> CGSize {
return CGSize(width: dragAmount.width + translation.width, height: dragAmount.height + translation.height)
}
var body: some View{
return ZStack(){
Rectangle().fill(Color.red).frame(width: 100, height:400).scaleEffect(x:5,y:1,anchor: .leading)
.overlay(Color.clear.frame(width: 40) // << make width as needed
.contentShape(Rectangle())
.gesture(
DragGesture(minimumDistance: 20)
.updating(self.$position){ value, state, translation in
state = value.translation
}
.onEnded{ value in
if value.translation.width > 50 {
guard position.width + self.addToPosition(translation: CGSize(width:330, height:0)).width < 330-1 else {
return print("too far right")
}
self.dragAmount = self.addToPosition(translation: CGSize(width:330, height:0))
} else {
guard position.width + self.addToPosition(translation: CGSize(width:-330, height:0)).width > -330-1 else {
return print("too far left")
}
self.dragAmount = self.addToPosition(translation: CGSize(width:-330, height:0))
}
}
), alignment: .leading)
.offset(x: 190)
.offset(x: addToPosition(translation: position).width )
}.animation(Animation.linear)
}
}