SwiftUI Swipe/Drag over NavigationLink - swift

Question

I want to be able to update a view with a swipe left/right over a NavigationView that has multiple NavigationLinks in it. The NavigationLinks go to different presentation views.
When I begin the Drag gesture on the outer most view, if that gesture begins over a NavigationLink, the link changes color as though it has been pressed. Continuing the drag gesture, the main view does update as expected and the NavigationLink returns to it's normal state (color).
What I need is a way to have the NavigationLink NOT change color when it is a drag gesture that is occuring. Maybe a way to have the NavigationLink react "if" the touch is a long touch or something.
Here is some code that demonstrates what I am seeing. This is not my actual project, but a very stripped down example.
Any suggestions or solutions appreciated!
import SwiftUI
struct ContentView: View {
#State var outputText: String = ""
var body: some View {
VStack(alignment: .center, spacing: 20) {
NavigationView {
VStack {
Text("Navigation View")
NavigationLink(destination: Text("Showwing Widget")) {
HStack {
Text("Navigation Link")
}
.frame(width: 300, height: 200)
.border(Color.blue)
}
.border(Color.red)
Spacer()
}
.border(Color.yellow)
}
Text(outputText)
.font(.title)
.fontWeight(.bold)
Text("My Green Oval")
.foregroundColor(.white)
.fontWeight(.bold)
.font(.title)
.frame(width: 300, height: 200)
.background(
Ellipse()
.fill(Color.green)
)
Button(action: {
outputText = "Button tapped"
}) {
Text("Button to Tap")
}
Text("Just some words...")
Spacer()
}
.highPriorityGesture(DragGesture(minimumDistance: 25, coordinateSpace: .local)
.onEnded { value in
if abs(value.translation.height) < abs(value.translation.width) {
if abs(value.translation.width) > 50.0 {
if value.translation.width < 0 {
self.swipeRightToLeft()
} else if value.translation.width > 0 {
self.swipeLeftToRight()
}
}
}
}
)
}
func swipeRightToLeft() {
outputText = "Swiped Right to Left <--"
}
func swipeLeftToRight() {
outputText = "Swiped Left to Right -->"
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 1

After toying around forever I have a solution here! Hacky maybe, but it works with little effort. Configure your view with an offset that is conditional on whether your drawer row is open or not and also create a state variable to keep track on whether or not your user is dragging. You can get the screenWidth by using UIScreen.main.bounds.width.
.offset(x: self.isOpen ? -screenWidth/12 : 0, y: 0)
.simultaneousGesture(DragGesture()
.onChanged{ gesture in
self.isDragging = true
self.offset = gesture.translation.width
}
.onEnded { _ in
self.isDragging = false
if self.offset > 0 {
withAnimation {
self.isOpen = false
self.offset = 0
}
} else if self.offset < 0 {
withAnimation {
self.isOpen = true
self.offset = 0
}
}
})
Then add this disable modifier on your NavigationLink
.disabled(self.isDragging || self.isOpen)
Good luck! Hopefully this works for you as well if you haven't found a solution.