How Do I Replicate the Exact Native iMessage Contact/Profile Transition Animation in iOS?

This looks like a zoom navigation transition going to a full screen cover.

A zoom navigation transition is implemented by using .navigationTransition in combination with .matchedTransitionSource. I have no idea how you would ask Claude/Codex to generate this for you, but here is an example that shows it working:

struct ContentView: View { @State private var isShowingDetail = false @Namespace private var ns var body: some View { VStack { Button { isShowingDetail = true } label: { VStack { Image(systemName: "person.crop.circle.fill") .font(.largeTitle) .imageScale(.large) .foregroundStyle(.indigo) Text("Name") } } .buttonStyle(.plain) .matchedTransitionSource(id: 0, in: ns) Text("Other content") .frame(maxWidth: .infinity, maxHeight: .infinity) } .fullScreenCover(isPresented: $isShowingDetail) { DetailView() .navigationTransition(.zoom(sourceID: 0, in: ns)) } } } struct DetailView: View { @Environment(\.dismiss) private var dismiss var body: some View { NavigationStack { Text("Detail view") .toolbar { ToolbarItem(placement: .topBarLeading) { Button("Back", systemImage: "chevron.backward") { dismiss() } } } } } }

---

You also mentioned:

that new screen should have a transparent/glass effect as well

I am not sure, whether the Messages app has a glass effect, or whether it uses a material background for the overlay. Or it might be a combination of both. In any case, you can implement the effect by applying .presentationBackground(.clear) to the full screen cover and setting the desired background behind the content of the detail view. Something like:

DetailView() .presentationBackground(.clear) .navigationTransition(.zoom(sourceID: 0, in: ns)) // DetailView NavigationStack { // ... } .background { Rectangle() .fill(.regularMaterial) .glassEffect(.clear, in: .containerRelative) .ignoresSafeArea() }

Unfortunately, it seems that the background only gets shown once the zoom transition has completed, which does not give a great user experience. The post Weird animation when Glass Element is the source of a navigationTransition also relates to this issue.