matchedTransitionSource(id:in:)

Declaration

nonisolated func matchedTransitionSource(id: some Hashable, in namespace: Namespace.ID) -> some CustomizableToolbarContent

Parameters

• id:

  The identifier, often derived from the identifier of the data being displayed by the toolbar content.

• namespace:

  The namespace in which defines the id. New namespaces are created by adding an Namespace variable to a View or Toolbarcontent type and reading its value in the type’s body method.

Discussion

Use this modifier in conjunction with navigationTransition(_:) to provide a source for the transition effect:

struct ContentView: View {
    @State private var isPresented = false
    @Namespace private var namespace

    var body: some View {
        NavigationStack {
            DetailView()
                .toolbar {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button("Show Sheet", systemImage: "globe") {
                            isPresented = true
                        }
                    }
                    .matchedTransitionSource(
                        id: "world", in: namespace)
                }
                .sheet(isPresented: $isPresented) {
                    SheetView()
                        .navigationTransition(
                            .zoom(sourceID: "world", in: namespace))
                }
        }
    }
}