Drill Down Navigation without a list of items using TCA Navigation tools

[tobitech]

I recently followed the TCA navigation - https://pointfreeco.github.io/swift-composable-architecture/main/tutorials/composablearchitecture/02-01-yourfirstpresentation/

Here is the Destination reducer

extension ContactsFeature {
	struct Destination: ReducerProtocol {
		enum State: Equatable {
			case addContact(AddContactFeature.State)
			case alert(AlertState<ContactsFeature.Action.Alert>)
		}
		
		enum Action: Equatable {
			case addContact(AddContactFeature.Action)
			case alert(ContactsFeature.Action.Alert)
		}
		
		var body: some ReducerProtocolOf<Self> {
			Scope(state: /State.addContact, action: /Action.addContact) {
				AddContactFeature()
			}
		}
	}
}

and here is how the plus button tap is handled:

switch action {
case .addButtonTapped:
    state.destination = .addContact(
	    AddContactFeature.State(
		    contact: Contact(
			    id: UUID(),
			    name: ""
		    )
	    )
    )
    return .none
// ..
}

The ContactFeature has a tree base navigation with enums and presents a modal view AddContactView with .sheet(store:) modifier:

.sheet(
	store: self.store.scope(state: \.$destination, action: { .destination($0) }),
	state: /ContactsFeature.Destination.State.addContact,
	action: ContactsFeature.Destination.Action.addContact
) { addContactStore in
	NavigationStack {
		AddContactView(store: addContactStore)
	}
}

What do I need to do to convert this to a drill down navigation so that the AddContactView is pushed on the Contacts list instead of presenting it as a modal?

I tried changing the .sheet(store:) modifier to a .navigationDestination(store:) modifier:

.navigationDestination(
	store: self.store.scope(state: \.$destination, action: { .destination($0) }),
	state: /ContactsFeature.Destination.State.addContact,
	action: ContactsFeature.Destination.Action.addContact,
	destination: { addContactStore in
		NavigationStack {
			AddContactView(store: addContactStore)
		}
	}
)

But when I run the app and tap the button nothing happens.

The drill down navigation when i select an item on the list works but that uses a path with StackState generic on the state of the detail view. var path = StackState<ContactDetailFeature.State>()

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-14.at.15.11.18.mp4

[mbrandonw]

Hi @tobitech, can you provide a full code example that demonstrates the bad behavior?

Also, this snippet here is not correct:

.navigationDestination(
	store: self.store.scope(state: \.$destination, action: { .destination($0) }),
	state: /ContactsFeature.Destination.State.addContact,
	action: ContactsFeature.Destination.Action.addContact,
	destination: { addContactStore in
		NavigationStack {
			AddContactView(store: addContactStore)
		}
	}
)

This is trying to push a whole new NavigationStack onto the navigation stack. That will create nested navigation stacks. At the very least you need to remove the NavigationStack inside the destination trailing closure.

There may be more things that need to change, but that is the only thing that stood out from the code you have provided so far.

[tobitech]

Hello @mbrandonw thanks for pointing that out.
The NavigationStack was an oversight after different attempts to get the drill down navigation to work. Removing that doesn't solve the issue I'm experiencing.
Here is the full code sample - https://github.com/tobitech/TCAContacts.

[mbrandonw]

Hi @tobitech, thank you for sharing the project. The problem is that you are applying navigationDestination on the outside of NavigationStack and so it does not see that state change and does not push the screen onto the stack. You need to move that view modifier inside the navigation stack's root view, like say on the List { … }, and then it will work.

This is how it works in vanilla SwiftUI too.

[tobitech]

Yes it solved it. I knew I must missing something fundamental 🤦‍♂️
Thanks @mbrandonw for taking the time to help with this.