ios – How to achieve a 2 column grid of cards that expand into a full screen view when tapped upon?

This answer is made Community Wiki.

Thanks to this answer by @Benzy Neez I found out about navigationTransition and it completely solved my problem. It just required a small modification. We use a .navigationLink instead of a .fullScreenCover and we put ParentView in a NavigationStack. The following is the code for a working example of what I was trying to achieve. Just make sure you put ParentView in a NavigationStack as the following code doesn’t do it because it’s done in another file in my project.

// The model of a note.
struct Note: Identifiable, Equatable {
    
    let id: String
    let title: String
    let body: String
    let timestamp: Double
    let edited: Bool
}


// The main view.
struct ParentView: View {
    @Namespace private var ns
    
    let columns = [
        GridItem(.flexible(), spacing: 16),
        GridItem(.flexible(), spacing: 16)
    ]

    var body: some View {
        
        ScrollView {
            
            LazyVGrid(columns: columns) {
                
                ForEach(mockNotes) { note in
                        
                    NavigationLink(
                        destination: DetailView(note: note).navigationTransition(.zoom(sourceID: note.id, in: ns))
                    ) {
                        CardView(note: note)
                            .matchedTransitionSource(id: note.id, in: ns)
                    }
                    .buttonStyle(.plain)
                }
            }
        }
        .padding()

    }
}

let screenWidth = UIScreen.main.bounds.width
let horizontalPadding: CGFloat = 16 * 2   // left + right
let columnSpacing: CGFloat = 16
let cardWidth = (screenWidth - horizontalPadding - columnSpacing) / 2
let cardHeight = cardWidth * 1.3


// The card view of a note.
struct CardView: View {
    
    @Environment(\.dismiss) private var dismiss
    
    let note: Note
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {

            Text(note.title)
                .font(.system(size: 14, weight: .semibold, design: .rounded))
                .lineLimit(3)
                .truncationMode(.tail)

            Text(note.body)
                .font(.system(size: 10, design: .rounded))
                .lineLimit(12)
                .truncationMode(.tail)
            
            Spacer()

            Text(formattedTimestamp)
                .font(.system(size: 11, weight: .bold, design: .rounded))
                .foregroundColor(.blue)
        }
        .padding(16)
        .frame(width: cardWidth, height: 200, alignment: .topLeading)
        .background(Color.blue.opacity(0.06))
        .clipShape(RoundedRectangle(cornerRadius: 18))
    }
    
    private var formattedTimestamp: String {
        let date = Date(timeIntervalSince1970: note.timestamp)
        let formatter = DateFormatter()
        formatter.dateFormat = "dd/MM/yyyy"
        return formatter.string(from: date)
    }
}

// The detail view of a note.
struct DetailView: View {
    let note: Note

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text(note.title)
                    .font(.largeTitle)
                    .bold()

                Text(note.body)
                    .font(.body)

                //Spacer(minLength: 40)
            }
            .padding()
        }
    }
}

// Mock notes generated by an LLM.
let mockNotes: [Note] = [
    Note(
        id: "0",
        title: "Grocery List",
        body: "Eggs, milk, almond butter, sourdough bread, avocados, fresh spinach, coffee beans, and dark chocolate. Don't forget the reusable bags this time!",
        timestamp: Date().timeIntervalSince1970 - 3600,
        edited: false
    ),
    Note(
        id: "1",
        title: "The Ultimate Guide to Launching a Successful Side Project and Scaling It to Ten Thousand Monthly Active Users Before End of Q4",
        body: "Phase 1: Idea validation. Talk to at least 20 potential users. Phase 2: Build the MVP. Keep it dead simple. Focus on one core feature that solves the primary pain point. Phase 3: Launch on Product Hunt, Hacker News, and specialized Reddit communities. Phase 4: Gather feedback relentlessly, iterate weekly, and ignore the vanity metrics. Focus purely on retention and word-of-mouth growth.",
        timestamp: Date().timeIntervalSince1970 - 7200,
        edited: true
    ),
    Note(
        id: "2",
        title: "Ideas",
        body: "An app that tells you exactly what is expiring in your fridge. A smart collar for cats that translates meows into text messages. A marketplace for trading half-used gift cards.",
        timestamp: Date().timeIntervalSince1970 - 14400,
        edited: false
    ),
    Note(
        id: "3",
        title: "Deep Thoughts on Modern Architecture and the Evolution of Human Habitation in Metropolises",
        body: "As cities grow denser, our living spaces shrink, forcing a paradigm shift in interior design. We aren't just building rooms anymore; we are designing modular ecosystems. Every piece of furniture must serve three purposes. Every window must maximize natural light to combat the psychological toll of concrete jungles. The future of architecture isn't about grand outer structures, but about optimizing the internal human experience within highly constrained physical boundaries.",
        timestamp: Date().timeIntervalSince1970 - 86400,
        edited: true
    ),
    Note(
        id: "4",
        title: "Call Mom",
        body: "Remind her about Aunt Susan's birthday dinner next Sunday at 6 PM. Also ask for her secret lasagna recipe because mine keeps turning out too watery.",
        timestamp: Date().timeIntervalSince1970 - 100000,
        edited: false
    )
]