SwiftUI: horizontal ScrollView inside NavigationLink breaks navigation

2
votes

I want to use a simple horizontal ScrollView as NavigationLink inside a List. However, tapping on the ScrollView is not registered by a NavigationLink and therefore does not navigate to the destination.

NavigationView {
    List {
        NavigationLink(destination: Text("Detail")) {
            ScrollView(.horizontal) {
                Text("Tapping here does not navigate.")
            }
        }
    }
}

Any ideas on how can we prevent ScrollView from capturing the navigation tap gesture?

2
iosswiftswiftuiswiftui-navigationlinkswiftui-scrollview

2 Answers

1
votes

You can move NavigationLink to the background and activate it in onTapGesture:

struct ContentView: View {
    @State var isLinkActive = false
    
    var body: some View {
        NavigationView {
            List {
                ScrollView(.horizontal) {
                    Text("Tapping here does not navigate.")
                }
                .onTapGesture {
                    isLinkActive = true
                }
            }
            .background(
                NavigationLink(destination: Text("Detail"), isActive: $isLinkActive) {}
            )
        }
    }
}
1
votes

The final goal is not clear, but the following alternate does also work (tested with Xcode 12 / iOS 14)

NavigationView {
    List {
        ScrollView(.horizontal) {
            NavigationLink(destination: Text("Detail")) {
                Text("Tapping here does not navigate.")
            }
        }
    }
}