Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative animation for fullscreen cover / modal - iOS 14

Is there a way to use an alternative animation for the new fullscreen modal is iOS 14 in SwiftUI?

At present it slides up from the bottom, but I'd like crossdissolve. I've tried a few things but no luck. I'm thinking the new matchedGeometryEffect() modifier might be of use.

Below is the default use of this new feature

struct ContentView: View {

    @State private var isShowing = false

    var body: some View {
        Button {
            isShowing.toggle()
        } label: {
            Text("Show Modal").font(.largeTitle)
        }.fullScreenCover(isPresented: $isShowing) {
            Text("Hello").font(.largeTitle)
        }
    }
}
like image 220
DogCoffee Avatar asked Jun 26 '20 11:06

DogCoffee


1 Answers

Right now there is no direct API to do this but you can have a simple hack using ZStack to solve this issue

The bellow code works just fine as an alternate

@State var isPresented = false

var body: some View {
    
    ZStack {
        
        NavigationView {
            VStack {
                
                Button(action: {
                    // trigger modal presentation
                    withAnimation {
                        self.isPresented.toggle()
                    }
                    
                }, label: {
                    Text("Show standard modal")
                })
                
            }.navigationBarTitle("Standard")
        }
        
        ZStack {
            HStack {
                Spacer()
                VStack {
                    
                    HStack {
                        Button(action: {
                            // trigger modal presentation
                            withAnimation {
                                self.isPresented.toggle()
                            }
                            
                        }, label: {
                            Text("Dismiss")
                                .font(.headline)
                                .foregroundColor(.white)
                        })
                        Spacer()
                        
                        Image(systemName: "xmark.circle.fill")
                            .foregroundColor(.white)
                            .onTapGesture {
                                withAnimation {
                                    self.isPresented.toggle()
                                }
                        }
                    }
                    
                    
                        .padding(.top, UIApplication.shared.windows.filter{$0.isKeyWindow}.first?.safeAreaInsets.top)
                    Spacer()
                }
                Spacer()
            }
            
            
            
        }.background(Color.yellow)
            .edgesIgnoringSafeArea(.all)
            .offset(x: 0, y: self.isPresented ? 0 : UIApplication.shared.keyWindow?.frame.height ?? 0)
         
        
    }
    
}
like image 135
Albi Avatar answered Sep 20 '22 21:09

Albi