Mastering Matched Geometry Effect in SwiftUI | List to Full-Screen Animation Tutorial

gistfile1.txt

import SwiftUI

struct ContentView: View {
    @Namespace var animation
    @Namespace var backgroundID
    
    @State var showingFullScreen = false
    
    var body: some View {
        TabView {
            ZStack {
                Color.gray
                
                if !showingFullScreen {
                    Button(action: {
                        showingFullScreen = true
                    }, label: {
                        RoundedRectangle(cornerRadius: 30)
                            .matchedGeometryEffect(id: backgroundID, in: animation)
                            .frame(maxHeight: 100)
                            .padding()
                    })
                    .tint(.black)
                } else {
                    RoundedRectangle(cornerRadius: 30)
                        .matchedGeometryEffect(id: backgroundID, in: animation)
                        .padding()
                        .overlay {
                            Button(action: {
                                showingFullScreen = false
                            }, label: {
                                Text("Dismiss")
                            })
                        }
                }
                
            }
            .ignoresSafeArea()
            .toolbar(showingFullScreen ? .hidden : .visible, for: .tabBar)
            .toolbar(showingFullScreen ? .hidden : .visible, for: .navigationBar)
            .tabItem {
                Label("Home", systemImage: "house.fill")
            }
            .animation(.easeInOut, value: showingFullScreen)
        }
    }
}

#Preview {
    ContentView()
}