.navigationTitle animation slightly broken when using .navigationDestination, vs native alternative

[iandundas]

I'm having an issue with the navigation title animation using (I think and hope) the most basic but faithful SwiftUINavigation setup from the videos (though diverting from the videos by adopting .navigationDestination(unwrapping:case:) instead of the deprecated NavigationLink(unwrapping:case:onNavigate:destination))

Worth noting that this issue occurred for me only after switching from the deprecated NavigationLink(unwrapping:case:onNavigate:destination), which didn't seem to have the issue.

Here's the issue with slow-mo enabled:

Vanilla SwiftUI - the title animates in

CleanShot.2023-02-06.at.12.34.24.mp4

SwiftUINavigation - the title appears after animation completion

CleanShot.2023-02-06.at.12.27.00.mp4

There's a sample project to clone, but it's really just one file.

There are two @main, one is commented out, you can toggle them to see the effect:

• First one is vanilla SwiftUI using simple demo of NavigationStack
• The second is using the View+ViewModel+Route+.navigationDestination(unwrapping:case:destination), but is visually the same.

Both are a list with a row, where you navigate to a detail view.

One thought: Obviously the animation in the Standups demo app is not broken, but I can see that in StandupsList, there is no intermediate StandupRowView type (compared with the analogous ItemRowView from the previous navigation series that used NavigationLink, where the row itself is extracted and has its own ViewModel), so the .navigationDestination(unwrapping:case:) was placed directly into StandupsList, further up the view hierarchy. Maybe that makes the difference.

It's very likely my own mistake, but I cannot see it.

Thanks for your eyes,
Ian

[iandundas]

To come from another angle (code taken from sample project 🔼),

This version has the correct animation:

struct ItemRowView: View {
	
	@ObservedObject var viewModel: ItemRowViewModel
	
	init(viewModel: ItemRowViewModel) {
		self.viewModel = viewModel
	}
	
	var body: some View {

		NavigationLink(value: viewModel.item) {
			Text(viewModel.item.title)
		}
		.navigationDestination(for: Item.self) { item in
			EditItemView(viewModel: .init(item: item))
				.navigationTitle("Navigation Title")
		}
	}
}

but this one (using the custom .navigationDestination()) has the broken title animation:

struct ItemRowView: View {
	
	@ObservedObject var viewModel: ItemRowViewModel
	
	init(viewModel: ItemRowViewModel) {
		self.viewModel = viewModel
	}
	
	var body: some View {

		Button {
			viewModel.userTappedRow()
		} label: {
			Text(viewModel.item.title)
		}
		.buttonStyle(.borderless)
		.navigationDestination(
			unwrapping: $viewModel.route,
			case: /ItemRowViewModel.Route.edit,
			destination: { $editDayViewModel in

				EditItemView(viewModel: editDayViewModel)
					.navigationTitle("Navigation Title")
			}
		)
	}
}

All comments appreciated :)

[stephencelis]

Hi @iandundas! Unfortunately this looks like another Apple bug.

Our navigationDestination view modifier isn't really "custom." It's hitting an Apple API that takes a boolean binding. You can eliminate our SwiftUI Navigation dependency entirely and swap in the following code instead, which creates a binding from scratch, and you'll still see the issue:

Button {
  viewModel.userTappedRow()
} label: {
  Text(viewModel.item.title)
}
.buttonStyle(.borderless)
.navigationDestination(
  isPresented: Binding(
    get: {
      guard case .edit = self.viewModel.route else { return false }
      return true
    },
    set: { isPresented in
      if !isPresented {
        self.viewModel.route = nil
      }
    }
  )
) {
  if case let .edit(editDayViewModel) = self.viewModel.route {
    EditItemView(viewModel: editDayViewModel)
      .navigationTitle("Navigation Title")
  }
}

If you file a feedback, we'd be happy to duplicate and catalog it alongside the many other feedbacks we've filed for SwiftUI navigation issues: https://gist.github.com/mbrandonw/f8b94957031160336cac6898a919cbb7

[stephencelis]

On closer inspection, it appears that the optional view is the issue. This might still be an "Apple bug," but we can at least work around it by swapping the above destination out for one that always applies the navigation title:

{
  Group {
    if case let .edit(editDayViewModel) = self.viewModel.route {
      EditItemView(viewModel: editDayViewModel)
    }
  }
  .navigationTitle("Navigation Title")
}

We'll have to discuss and see if there's a nice workaround at the library level!

[stephencelis]

Yeesh, it's even more subtle, if you do file a bug. I noticed that it seems to be Form-related: if you remove the List in the parent it'll render the title without delay. Similarly, if you add Form to the child it'll bring back the delay.

[iandundas]

Hey @stephencelis, thanks for diving into this! Very useful findings.

I tried out your suggestions, and indeed replacing it with a custom local binding works great:

Button {
	viewModel.userTappedRow()
} label: {
	Text(viewModel.item.title)
}
.buttonStyle(.borderless)
.navigationDestination(
	isPresented: Binding(
		get: {
			guard case .edit = self.viewModel.route else { return false }
			return true
		},
		set: { isPresented in
			if !isPresented {
				self.viewModel.route = nil
			}
		}
	)
) {

	Group {
		if case let .edit(editDayViewModel) = self.viewModel.route {
			EditItemView(viewModel: editDayViewModel)
		}
	}
	.navigationTitle("Navigation Title")

}

(using the Group {} inside the original .navigationDestination(unwrapping:case:destination:) sample code above did not work, though I don't think it was supposed to):

(this doesn't work 👇)

Button {
	viewModel.userTappedRow()
} label: {
	Text(viewModel.item.title)
}
.buttonStyle(.borderless)
.navigationDestination(
	unwrapping: $viewModel.route,
	case: /ItemRowViewModel.Route.edit,
	destination: { $editDayViewModel in
		Group {
		  if case let .edit(editDayViewModel) = self.viewModel.route {
			EditItemView(viewModel: editDayViewModel)
		  }
		}
		.navigationTitle("Navigation Title")
	}
)

When I've a moment I will type up a Radar and report back here 👍🏻

Thanks!

[stephencelis]

@iandundas Correct, that won't work. If you're using Form and encountering these bugs, we recommend working around them with custom bindings, for now. We weren't able to implement library-level workarounds we were happy with, unfortunately. Hopefully Apple will fix some of these issues soon, but given that SwiftUI has many navigation bugs, old and new, and few have been fixed, we do think it may be on app developers to continue to workaround issues ourselves for now.