[SOLVED] Navigation bug when linking two levels of NavigationLinkStore.

[oliverfoggin]

Solution: Actually use the observe property. 👍🏻

Just come across a weird navigation bug in our app and managed to create a minimal project to replicate it.

If you have two chained NavigationLinkStore it causes an issue on the final one.

I have some code to replicate this...

LevelOne

import SwiftUI
import ComposableArchitecture

struct LevelOne: Reducer {
	struct State: Equatable {
		@PresentationState var levelTwo: LevelTwo.State?

		var title = "Level one"
	}

	enum Action: Equatable {
		case onAppear
		case levelTwoTapped

		case levelTwo(PresentationAction<LevelTwo.Action>)
	}

	var body: some ReducerOf<Self> {
		Reduce<State, Action> { state, action in
			switch action {
			case .onAppear:
				print("On appear level one")
				return .none

			case .levelTwoTapped:
				state.levelTwo = .init()
				return .none

			case .levelTwo:
				return .none
			}
		}
		.ifLet(\.$levelTwo, action: /Action.levelTwo) {
			LevelTwo()
		}
	}
}

struct ContentView: View {
	let store: StoreOf<LevelOne>

	var body: some View {
		NavigationView {
			WithViewStore(store, observe: { $0 }) { viewStore in
				NavigationLinkStore(
					store.scope(state: \.$levelTwo, action: LevelOne.Action.levelTwo)) {
						viewStore.send(.levelTwoTapped)
					} destination: { store in
						LevelTwoView(store: store)
					} label: {
						Text(viewStore.title)
					}
			}
		}
	}
}

This creates the view which just contains a link to LevelTwo...

LevelTwo

import SwiftUI
import ComposableArchitecture

struct LevelTwo: Reducer {
	struct State: Equatable {
		@PresentationState var levelThree: LevelThree.State?

		var title = "Level two"
	}

	enum Action: Equatable {
		case onAppear
		case levelThreeTapped

		case levelThree(PresentationAction<LevelThree.Action>)
	}

	var body: some ReducerOf<Self> {
		Reduce<State, Action> { state, action in
			switch action {
			case .onAppear:
				print("On appear level two")
				return .none

			case .levelThreeTapped:
				state.levelThree = .init()
				return .none

			case .levelThree:
				return .none
			}
		}
		.ifLet(\.$levelThree, action: /Action.levelThree) {
			LevelThree()
		}
	}
}

struct LevelTwoView: View {
	let store: StoreOf<LevelTwo>

	var body: some View {
		WithViewStore(store, observe: { $0 }) { viewStore in
			NavigationLinkStore(
				store.scope(state: \.$levelThree, action: LevelTwo.Action.levelThree)) {
					viewStore.send(.levelThreeTapped)
				} destination: { store in
					LevelThreeView(store: store)
				} label: {
					Text(viewStore.title)
				}
				.onAppear {
					viewStore.send(.onAppear)
				}
		}
	}
}

This is pretty much identical to Level One but links to Level Three...

Level Three

import SwiftUI
import ComposableArchitecture

struct LevelThree: Reducer {
	struct State: Equatable {
		var title = "Level three"
	}

	enum Action: Equatable {
		case onAppear
	}

	var body: some ReducerOf<Self> {
		Reduce<State, Action> { state, action in
			switch action {
			case .onAppear:
				print("On appear level three")
				return .none
			}
		}
	}
}

struct LevelThreeView: View {
	let store: StoreOf<LevelThree>

	var body: some View {
		WithViewStore(store, observe: { $0 }) { viewStore in
			Text(viewStore.title)
				.onAppear {
					viewStore.send(.onAppear)
				}
		}
	}
}

This is where the bug happens.

When you navigate to LevelThree you will see the push happen twice and then pop back to LevelTwo.

Video of the issue

Screen.Recording.2023-03-14.at.18.10.26.mov

[Alex293]

You are observing the whole state WithViewStore(store, observe: { $0 }) this means if any sub state changes you redraw the whole view. In this demo when you push the third view you redraw the first view too. Navigation works by calculating what state changed. When you redraw 1, 2 should pop, because 3 is different it should be push.

[MojtabaHs]

How exactly you solved this? What are you observing? Also how about when you are using a Destination enum for managing multiple optional destinations? do you have any Idea?

[oliverfoggin]

How exactly you solved this? What are you observing? Also how about when you are using a Destination enum for managing multiple optional destinations? do you have any Idea?

I haven't solved this yet. There are several places where we are observing too much so we need to fix multiple places before trying this again.

I'll update once it's fixed though. 👍🏻

[MojtabaHs]

Hey, I have solved this by extracting the link from the view hierarchy and scoping things out!

Here is the link to a repo that shows the fixing progress in the commit history

---

Also (not related to this issue but worth mentioning) I have centralized the Destination reducer in my original project to handle all NavigationLinks as I have many loops in my navigation graph and I wanted it to be DRY

[CarlsCorrea]

Hello, I tried your solution @MojtabaHs seems to work.

How can we pop to root using the NavigationLinkStore? any ideias ?

[MojtabaHs]

You should have a delegated action and invoke it on the first level of navigation to make the destination nil. Then all views will be of the navigation and you will be routed to the root as expected.

Also, I've noticed that direct changing of the navigation stack (for example using the tap an hold functionality of the native back button) causes a minor glitch, but it works at the end.