SwiftUI Drag gesture in vertical ScrollView that contains horizontal ScrollView - ios

Question

I want to implement a Pager that allows a user to move between two views by swiping left or right. Each of these views is a ScrollView that contains many elements (mostly VStacks and HStacks with Text elements, but there are also horizontal ScrollViews containing Text elements).
I attach a highPriorityGesture(DragGesture()) to the Pager and as the user drags I offset the views so that one view becomes visible and the other slides off the screen. In the drag gesture's .onEnded callback if translation.width predicatedTranslation.width exceeds a threshold then I switch the view (so that the user doesn't have to swipe through the whole screen, but only half of it) and if it doesn't exceed the threshold I make the view snap back to its initial position.
The problem appears when one of the two views embedded in the Pager contains a horizontal ScrollView. Then the highPriorityGesture(DragGesture()) misbehaves. What happens is the following:
the horizontal ScrollView scrolls to the left/right
the highPriorityGesture(DragGesture()) picks up that drag and .onChanged callback fires and updates the offset, but the .onEnded callback never fires
The result is that the Pager moves one view a bit to the left/right, but since the .onEnded callback doesn't fire it just leave that view there instead of making it move back to the initial position (so it might end in showing 95% of the first view and 5% of the second view).
I also tried using .gesture(DragGesture()) instead of highPriorityGesture(DragGesture()), but it still picks up the drag from the child ScrollView.
Is there any way of making the child horizontal ScrollView to exclusively handle the its drag?
EDIT:
It happens also if one of the two views is simply a vertical ScrollView without any nested horizontal ScrollViews. Somehow even though it is vertical it can be dragged diagonally.
struct Pager2View<T1: View, T2: View>: View {
let pageCount: Int
let pageOne: T1
let pageTwo: T2
#Binding var currentIndex: Int
#State private var translation: CGSize = .zero
#State private var offset: CGFloat = 0.0
func exceedsThreshold(gesture: DragGesture.Value, geometryWidth: CGFloat) -> Bool {
(abs(gesture.translation.width) > (geometryWidth / 2)) || (abs(gesture.predictedEndTranslation.width) > (geometryWidth / 2))
}
var body: some View {
GeometryReader { geometry in
HStack {
self.pageOne.frame(width: geometry.size.width)
self.pageTwo.frame(width: geometry.size.width)
}
.frame(width: geometry.size.width, alignment: .leading)
.offset(x: self.offset)
.onChange(of: currentIndex) { value in
withAnimation {
if currentIndex == 0 {
self.translation.width = 0
} else {
self.translation.width = -geometry.size.width
}
}
}
.onChange(of: translation) { value in
withAnimation {
self.offset = max(-geometry.size.width, min(0, -geometry.size.width * CGFloat(currentIndex) + self.translation.width))
}
}
.highPriorityGesture(
DragGesture()
.onChanged { gesture in
self.translation = gesture.translation
}
.onEnded { gesture in
if exceedsThreshold(gesture: gesture, geometryWidth: geometry.size.width) {
if gesture.translation.width < 0 && exceedsThreshold(gesture: gesture, geometryWidth: geometry.size.width) && currentIndex == 0 {
withAnimation {
self.translation.width = 0
currentIndex = min(self.pageCount - 1, currentIndex + 1)
}
} else if gesture.translation.width > 0 && exceedsThreshold(gesture: gesture, geometryWidth: geometry.size.width) && currentIndex == 1 {
withAnimation {
self.translation.width = geometry.size.width
currentIndex = max(0, currentIndex - 1)
}
}
} else {
withAnimation(.interactiveSpring()) {
if currentIndex == 0 {
self.translation.width = 0
} else {
self.translation.width = -geometry.size.width
}
}
}
}
)
}
}
}