Help needed. Combine Portal with programmatic NavigationStack NavigationPath navigation and Zoom transition

[chichkanov]

Hey! Really like your lib and want to try to do something similar to what Family wallet app does. Basically the idea is to combine Navigation Stack + Zoom transition + Portal shared transition for the image. However, I am running into a couple of issues.

1. Since I want to use programmatic navigation with NavigationPath, it's not clear to me what's the cleanest way to trigger isActive portal transition binding?
2. I need to define portalTransition per each item in the list. However, the transition call either accepts an ID or an Identifiable binding, both of which doesn't seem like a good fit for my needs.

I feel like I am very close on it, but would love to hear your thoughts on how this could be achieved. Attaching a hacky demo

private struct ContentView2: View {
    
    enum NavDestination: Hashable {
        case demo(Int)
    }
    
    @State private var path = NavigationPath()
    
    @State private var triggerAnimation = false
    
    @Namespace private var namespace
    
    var body: some View {
        NavigationStack(path: $path) {
            ScrollView {
                VStack {
                    ForEach(0..<10) { index in
                        HStack {
                            Color.red
                                .frame(width: 50, height: 50)
                                .clipShape(.circle)
                                .portal(id: "demo\(index)", .source)
                            
                            Text("Some text title")
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .matchedTransitionSource(id: "demo\(index)", in: namespace)
                        .onTapGesture {
                            triggerAnimation.toggle()
                            path.append(NavDestination.demo(index))
                        }
                    }
                }
            }
            .navigationDestination(for: NavDestination.self) { destination in
                switch destination {
                case .demo(let index):
                    ScrollView {
                        VStack(alignment: .leading) {
                            HStack {
                                Color.red
                                    .frame(width: 50, height: 50)
                                    .clipShape(.circle)
                                    .portal(id: "demo\(index)", .destination)
                                    .onDisappear {
                                        triggerAnimation.toggle()
                                    }
                                
                                Text("Some text bla bla bla bla")
                            }
                        }
                    }
                    .navigationTransition(.zoom(sourceID: "demo\(index)", in: namespace))
                }
            }
            // How to trigger isActive binding by only relying on current navigation path?
            .portalTransition(id: "demo0", isActive: $triggerAnimation) {
                Color.red
                    .clipShape(.circle)
            }
            .portalTransition(id: "demo9", isActive: $triggerAnimation) {
                Color.red
                    .clipShape(.circle)
            }
            // How to set the portalTransition for multiple IDs but without the identifiable?
        }
        .portalContainer()
    }
}

The example of the UI I want to implement. Obviously it has much more than that, but Portal + Zoom gets pretty close

ScreenRecording_07-29-2025.23-49-24_1.MP4

[Aeastr]

You’re right that the isActive binding is best suited for singular, static portal transitions (see PortalExample_StaticID()). For list-based navigation like your example, the recommended and idiomatic approach in SwiftUI is to use the Identifiable API, as shown in PortalExample_List().

In your case, you can make your navigation destination enum conform to Identifiable, or wrap your items in a struct that conforms to Identifiable. This way, you can associate each portal transition with a unique item, and the library will handle the rest. Here’s a quick sketch of how you might adapt your code

import SwiftUI

private struct DemoItem: Identifiable, Hashable {
    let id: Int
}

private struct ContentView2: View {
    @State private var path = NavigationPath()
    @State private var selectedItem: DemoItem? = nil
    @Namespace private var namespace

    let items = (0..<10).map { DemoItem(id: $0) }

    var body: some View {
        NavigationStack(path: $path) {
            ScrollView {
                VStack {
                    ForEach(items) { item in
                        HStack {
                            Color.red
                                .frame(width: 50, height: 50)
                                .clipShape(.circle)
                                .portal(item: item, .source)
                            Text("Some text title")
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .matchedTransitionSource(id: "demo\(item.id)", in: namespace)
                        .onTapGesture {
                            selectedItem = item
                            path.append(item)
                        }
                    }
                }
            }
            .navigationDestination(for: DemoItem.self) { item in
                ScrollView {
                    VStack(alignment: .leading) {
                        HStack {
                            Color.red
                                .frame(width: 50, height: 50)
                                .clipShape(.circle)
                                .portal(item: item, .destination)
                            Text("Some text bla bla bla bla")
                        }
                    }
                }
                .navigationTransition(.zoom(sourceID: "demo\(item.id)", in: namespace))
            }
            // Use the Identifiable-based portalTransition API:
            .portalTransition(
                item: $selectedItem,
                config: .init(
                    animation: PortalAnimation(portal_animationExample)
                )
            ) { item in
                Color.red
                    .clipShape(.circle)
            }
        }
        .portalContainer()
    }
}

The Identifiable-based API is designed for exactly this use case. You don’t need to manage individual IDs or isActive bindings for each item. Instead, use .portal(item:..., ...) and .portalTransition(item:..., ...) as shown in the PortalExample_List demo. This is the most idiomatic and scalable approach for lists in SwiftUI.

[chichkanov]

Thanks for a quick reply! I'll play around with it soon and let you know how it played out

[chichkanov]

Upd, just noticed smth in the code. Part of the problem I was experiencing is how to change the selectedItem back to nil again. When used with .sheet, it's pretty trivial because when sheet is dismissed it will set the binding back to false which will trigger a transition.
However, when done manually like in this example, selectedItem won't be set to nil. I tried doing it in onDisappear in my example, but the animation was broken. And obviously this has some side effects like if you are pushing a new screen on top of the existing one, you'll accidentally fire the transition too