Dismiss view and push to navigation stack SwiftUI

Question

I have my entire application wrapped in a NavigationView and am trying to duplicate the transition in the brief video listed below. Based on what I am seeing, it looks like they present a fullScreenCover , and when a link is pressed it dismisses the fullScreenCover and pushes whatever was tapped onto the navigation stack once the dismiss has completed.

Example video

I currently have this...

@Environment(\.dismiss) var dismiss
ScrollView {
    VStack {
        ForEach(viewModel.searchResults, id: \.self) { bottle in
            NavigationLink(destination: BottleDetailView(bottle: bottle)) {
                BottleCell(bottle: bottle) <-- tapping this would dismiss fullscreenCover and push this NavigationLink into the NavigationStack of my app
            }
        }
    }
}

I have tried embedding another navigation view in the fullscreenCover but that was not even close to duplicating the transition above. How can I duplicate this?

Answer 1

You can make use of a programmatically controllable NavigationStack . In the fullscreenCover first dismiss, then wait for it to vanish, then set the navigation destination.

Here is a full example:

struct ContentView: View {
    
    @State private var search = ""
    @State private var showSheet = false
    
    // programmatically controllable Navigation Stack
    @State private var path = [Int]()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                searchField
                    .disabled(true)
                    .onTapGesture {
                        showSheet = true
                    }
                
                Spacer()
                Text("Other stuff")
                Spacer()
                
            }
            .padding()
            .navigationTitle("Find something")
            
            .fullScreenCover(isPresented: $showSheet) {
                fullscreenSheet
            }
            
            // this defines the destination(s) for the programatically activated navigation stack
            .navigationDestination(for: Int.self) { value in
                Text("Detail View for Result \(value)")
            }
            
        }
    }
    
    
    var fullscreenSheet: some View {
        VStack(alignment: .leading, spacing: 30) {
            HStack {
                searchField
                Button("Cancel") { showSheet = false }
            }
            
            // dummy search results
            ForEach(1..<6) { result in
                Button("Result \(result) >") {
                    // dismiss sheet
                    showSheet = false
                    // wait and trigger navigation
                    Task {
                        try await Task.sleep(for: .seconds(0.1))
                        self.path = [result]
                    }
                }
            }
            Spacer()
        }
        .padding()
    }

    
    var searchField: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundColor(.white)
            TextField("", text: $search,
                      prompt: Text("What are you looking for?")
                .foregroundColor(.white)
            )
        }
        .padding()
        .background(
            Capsule().fill(.gray)
        )
    }
    
}