How to push a NavigationStack from another root NavigationStack

[JanC]

hey there,
I have a feature screen (View, Store, Reducer) which has its own nagivation stack. Basically the same thing as the Contact screen described in the 02-04-navigationstacks.

This screen lives in its own tab as a root view. In another part of the app, I'd like to be able to push this entire Contacts screen as child of an existing NavigationStack but I can't figure out how.

This is the ContactsView

struct ContactsView { 
    var store: StoreOf<ContactsFeature>
    ...
    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            List { ... }
        } destination: { store in
            ContactDetailsView(store: store)
        }
    }
}

This screen exists on its own as a root view of a tab and works as expected:

Now I want to also be able to push this entire screen as a child view from another root view.

I naively implemented the same pattern in that other root view and I push in the ContactsView

struct RootView: View {
    @Bindable
    var store: StoreOf<RootFeature>

    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {

            // content of the root view
            Button(action: { store.send(.selectContactsButtonTapped) }) {
                Text("Select your first contact")
            }

            Button(action: { store.send(.selectSecondContactsButtonTapped) }) {
                Text("Select your second contact")
            }

        } destination: { store in 
            switch store.case {
                case .selectContacts(let store):
                    ContactsView(store: store)
                case .selectSecondContacts(let store):
                    ContactsView(store: store)
        }
    }
}

This does not work because I'm pushing the ContactsView (which is a NavigationStack) into an existing NavigationStack.

So the question is how can I have a the ContactsView to be both as

• a root view with its own NavigationStack
• as a child view pushed to an existing NavigationStack (from the SomeFeatureView)

I believe the solution is somewhere in the 04-NavigationStack case study but I'm not sure how.

If I remove the NavigationStack from the ContactView, where should I instantiate the child of the ContactView (i.e.

destination: { store in 
   ContactDetailsView store: store)  
} 

?

thanks in advance 🙏

[mbrandonw]

Hi @JanC, as you noted you cannot nest navigation stacks. You really have no choice but to fully flatten the entire navigation hierarchy into the root, which means that it handles both the ContactsView and ContactDetailsView. You cannot have child features manage their own little portion of the navigation stack if you want to have everything integrated together.

If you are willing to de-integrate things, and have isolated islands of features, then you can use the type-erased NavigationPath. You won't hold onto this in your reducer, but rather just regular @State, and then any features can append little bits of data that are interpreted to figure out which view to push onto the stack. And each of those views will hold onto their own Store that is disconnected from the main root store.

[JanC]

Thanks Brandon.

So I flattened the navigation to the root view by adding cases to the Root view's Path:

import ComposableArchitecture
import SwiftUI

@Reducer
struct RootFeature {
    @ObservableState
    struct State: Equatable {
        var path = StackState<Path.State>()
    }
    
    enum Action: ViewAction {
        enum View {
            case selectFirstContact
        }

        case view(View)
        case path(StackActionOf<Path>)
    }
    
    @Reducer(state: .equatable)
    enum Path {
        case contacts(ContactsFeature)
        case contactDetails(ContactDetailsFeature)
    }
        
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .view(let viewAction):
                return reduceViewAction(&state, viewAction)
                
            case .path:
                return .none
            }
        }
        .forEach(\.path, action: \.path)
    }
    
    private func reduceViewAction(_ state: inout State, _ action: Action.View) -> Effect<Action> {
        switch action {
        case .selectFirstContact:
            state.path.append(.contacts(ContactsFeature.State(contacts: .contacts)))
            return .none
        }
    }
}

@ViewAction(for: RootFeature.self)
struct RootView: View {
    @Bindable
    var store: StoreOf<RootFeature>

    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            List {
                Section {
                    Button(action: { send(.selectFirstContact) }) {
                        Text("Select first contact")
                    }
                }
            }
        } destination: { store in
            switch store.case {
            case .contacts(let store):
                ContactsView(store: store)
            case .contactDetails(let store):
                ContactDetailsView(store: store)
            }
        }
        .navigationTitle("Root")
    }
}

#Preview {
    NavigationStack {
        RootView(
            store: Store(
                initialState: RootFeature.State(),
                reducer: { RootFeature()._printChanges() }
            )
        )
    }
}

For this to work though, in the child view, I need to use the NavigationLink using that RootFeature.Path.State instead of directly the ContactDetailsFeature.State(contact: contact) :

struct ContactsView: View {
    @Bindable
    var store: StoreOf<ContactsFeature>

    var body: some View {
         // Navigation is now in the Root view
         // NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            List {
                ForEach(store.contacts) { contact in
                    // before
                    // NavigationLink(state: ContactDetailsFeature.State(contact: contact)) {
                    // after
                    NavigationLink(state: RootFeature.Path.State.contactDetails(ContactDetailsFeature.State(contact: contact))) {

that works but now the ContactView is specific to the context of the RootView and cannot exist on its own as a standalone list of contacts (use case of my Tab1)

Could you please elaborate on your second appraoch with a type erased NavigationPath? many thanks for your time

[mbrandonw]

that works but now the ContactView is specific to the context of the RootView and cannot exist on its own as a standalone list of contacts (use case of my Tab1)

Yes, you just can't use NavigationLink if you want to keep the child features decoupled. Instead you can have ContactsView send an action, and the parent will intercept that action and push to the path. Then all features in the stack can be compiled in isolation without compiling the others.

Could you please elaborate on your second appraoch with a type erased NavigationPath? many thanks for your time

I don't really have the time to elaborate more than I already have. Give it a shot and let me know if you have concrete questions.

[JanC]

I've got it working by using delegate actions and letting the root views handle the navigation. I believe that's what @mbrandonw also suggested in another thread on Slack.

Starting from the completed 02-04-navigationstacks, the steps I did to be able to reuse the ContactsView both as a root of the navigation as well as a child of an existing navigation are the following:

• Remove the NavigationStack from the ContactsView
• Replace the NavigationLink by regular buttons that send a view action to the ContactsFeature.Store
• The ContactsFeature.Store sends a delegation action case didSelectContact(Contact)

This basically extracts the ContactsView from any navigation.

To embedd the ContactsView again in a NavigationStack as a root view (tab 2 of my original post) :

• Create a new ContactsListFeature which handles the navigation stack of the ContactsView (and it's children)
• Use the scoped store and embedd the ContactViewin a NavigationStack
• Implement the didSelectContact action to push the ContactDetail child

@Reducer
struct ContactsListFeature {
    @ObservableState
    struct State: Equatable {
        var contacts = ContactsFeature.State(contacts: .contacts)
        var path = StackState<Path.State>()
    }

    enum Action {
        case contacts(ContactsFeature.Action)
        case path(StackActionOf<Path>)
    }

    @Reducer(state: .equatable)
    enum Path {
        case contactDetails(ContactDetailsFeature)
    }

    var body: some ReducerOf<Self> {
        Scope(state: \.contacts, action: \.contacts) {
            ContactsFeature()
        }

        Reduce { state, action in
            switch action {
            case .contacts(.delegate(.didSelectContact(let contact))):
                state.path.append(.contactDetails(ContactDetailsFeature.State(contact: contact)))
                return .none
            case .contacts:
                return .none
            case .path:
                return .none
            }
        }
        .forEach(\.path, action: \.path)
    }
}

struct ContactsListView: View {
    @Bindable
    var store: StoreOf<ContactsListFeature>

    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            ContactsView(
                store: store.scope(state: \.contacts, action: \.contacts)
            )

        } destination: { store in
            switch store.case {
            case .contactDetails(let store):
                ContactDetailsView(store: store)
            }
        }
    }
}

To push the ContactsView to an existing NavigationStack (tab1 of my inital post):

• implement the action that pushes the ContactsView and add it to the navigation stack
• implement the delegation action didSelectContact of the ContactView action to push the ContactDetail child

@Reducer
struct RootFeature {
    @ObservableState
    struct State: Equatable {
        var path = StackState<Path.State>()
    }
    
    enum Action: ViewAction {
        enum View {
            case selectFirstContact
        }

        case view(View)
        case path(StackActionOf<Path>)
    }
    
    @Reducer(state: .equatable)
    enum Path {
        case contacts(ContactsFeature)
        case contactDetails(ContactDetailsFeature)
    }
        
    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {
            case .view(let viewAction):
                return reduceViewAction(&state, viewAction)
                
            case .path(.element(id: _, action: .contacts(.delegate(.didSelectContact(let contact))))):
                print("Showing contact details \(contact.firstName)")
                state.path.append(.contactDetails(ContactDetailsFeature.State(contact: contact)))
                return .none
            case .path:
                return .none
            }
        }
        .forEach(\.path, action: \.path)
    }
    
    private func reduceViewAction(_ state: inout State, _ action: Action.View) -> Effect<Action> {
        switch action {
        case .selectFirstContact:
            state.path.append(.contacts(ContactsFeature.State(contacts: .contacts)))
            return .none
        }
    }
}

@ViewAction(for: RootFeature.self)
struct RootView: View {
    @Bindable
    var store: StoreOf<RootFeature>

    var body: some View {
        NavigationStack(path: $store.scope(state: \.path, action: \.path)) {
            List {
                Section {
                    Button(action: { send(.selectFirstContact) }) {
                        Text("Push contact list")
                    }
                }
            }
        } destination: { store in
            switch store.case {
            case .contacts(let store):
                ContactsView(store: store)
            case .contactDetails(let store):
                ContactDetailsView(store: store)
            }
        }
        .navigationTitle("Root")
    }
}

🎉

To put those two screens in an actual tab view, it's the same as explained in 01-04-composingfeatures

Simulator.Screen.Recording.-.iPhone.15.Pro.M.-.2024-07-31.at.22.20.42.mp4

@mbrandonw many thanks for indicating the right direction as well as for providing such a great documentation 🙌