Hi All!
I've encountered a SwiftUI NavigationSplitView bug in my app that I'd appreciate help with, I've spent quite some time trying to work out a solution to this problem.
I have a main list, which has either a Location or LocationGroup. When selecting a Location, the detail view is presented.
When selecting a LocationGroup, a subsequent list of Locations are presented (from the group).
When tapping on any of these Locations, the NavigationStack does not animate (push the view), and when tapping back from it, it jumps to the main selection.
The overall goal is to be able to present within the detail: of a NavigationSplitView a NavigationStack, and to be able to push onto that stack from both the main NavigationSplitView's list, and from the detail.
I created the following sample code that reproduces the issue:
ContentView.swift
public enum LocationSplitViewNavigationItem: Identifiable, Hashable {
case location(Location)
case locationGroup(LocationGroup)
public var id: UUID? {
switch self {
case .location(let location):
return location.id
case .locationGroup(let locationGroup):
return locationGroup.id
}
}
}
struct ContentView: View {
@State private var columnVisibility = NavigationSplitViewVisibility.doubleColumn
@State private var selectedNavigationItem: LocationSplitViewNavigationItem?
var body: some View {
NavigationSplitView(columnVisibility: $columnVisibility) {
LocationListView(selectedItem: $selectedNavigationItem, locationData: LocationSampleData(locations: LocationSampleData.sampleLocations, locationGroups: LocationSampleData.sampleLocationGroups))
} detail: {
if let selectedLocation = selectedNavigationItem {
switch selectedLocation {
case .location(let location):
LocationDetailView(selectedLocation: location)
case .locationGroup(let locationGroup):
LocationListView(selectedItem: $selectedNavigationItem, locationData: LocationSampleData(locations: locationGroup.locations))
}
}
}
.navigationSplitViewStyle(.balanced)
}
}
LocationListView.swift
struct LocationListView: View {
@Binding public var selectedItem: LocationSplitViewNavigationItem?
var locationData: LocationSampleData
var body: some View {
List(selection: $selectedItem) {
if let locations = locationData.locations {
ForEach(locations) { location in
NavigationLink(value: LocationSplitViewNavigationItem.location(location)) {
Text(location.name)
.bold()
}
}
}
if let locationGroups = locationData.locationGroups {
ForEach(locationGroups) { locationGroup in
NavigationLink(value: LocationSplitViewNavigationItem.locationGroup(locationGroup)) {
Text(locationGroup.name)
.bold()
.foregroundStyle(.red)
}
}
}
}
.navigationTitle("Saturday Spots")
.navigationBarTitleDisplayMode(.large)
}
}
LocationDetailView.swift
struct LocationDetailView: View {
var selectedLocation: Location
var body: some View {
Text(selectedLocation.name)
.font(.largeTitle)
.bold()
.foregroundStyle(LinearGradient(
colors: [.teal, .indigo],
startPoint: .top,
endPoint: .bottom
))
.toolbarBackground(
Color.orange,
for: .navigationBar
)
.toolbarBackground(.visible, for: .navigationBar)
}
}
Location.swift
import CoreLocation
struct LocationSampleData {
var locations: [Location]?
var locationGroups: [LocationGroup]?
static let sampleLocations: [Location]? = Location.sample
static let sampleLocationGroups: [LocationGroup]? = [LocationGroup.sample]
}
public struct Location: Hashable, Identifiable {
var name: String
var coordinates: CLLocationCoordinate2D
var photo: String
public var id = UUID()
static public let sample: [Location] = [
Location(name: "Best Bagel & Coffee", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf"),
Location(name: "Absolute Bagels", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf"),
Location(name: "Tompkins Square Bagels", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf"),
Location(name: "Zabar's", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf"),
]
static public let oneSample = Location(name: "Absolute Bagels", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf")
}
public struct LocationGroup: Identifiable, Hashable {
var name: String
var locations: [Location]
public var id = UUID()
static public let sample: LocationGroup = LocationGroup(name: "Bowling", locations: [
Location(name: "Frames Bowling Lounge", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf"),
Location(name: "Bowlero Chelsea Piers", coordinates: CLLocationCoordinate2D(latitude: 123, longitude: 121), photo: "asdf")
])
}
extension CLLocationCoordinate2D: Hashable {
public static func == (lhs: Self, rhs: Self) -> Bool {
return lhs.latitude == rhs.latitude && lhs.longitude == rhs.longitude
}
public func hash(into hasher: inout Hasher) {
hasher.combine(latitude)
hasher.combine(longitude)
}
}
when tapping back from it, it jumps to the main selection.
This is because your navigation path is managed by the NavigationSplitView, you might want to consider programmatically managing the navigation state. I would recommend you review the Navigation cookbook sample project implementation, it has various examples that should help you understand the issue and you could apply the learnings in your project:
Also, your selectedNavigationItem state is shared across LocationListView, LocationDetailView, and NavigationSplitView, which can lead to complications, especially since you're displaying sidebar content within your detail view. Your recursive setup could be a pickle later on. I might get away with using only a NavigationStack instead of NavigationSplitView in this case.
When tapping on any of these Locations, the NavigationStack does not animate (push the view),
You could specify your custom animations and transition in this case.
See Animating views and transitions tutorials and WWDC session on Enhance your UI animations and transitions