Create Custom alert or popup view in SwiftUI

In this SwiftUI tutorial, we’ll learn how to make a custom alert view or any popup view in SwiftUI. We’ll be using all the components we are already familiar with to create a custom alert.

You can also check: Is it possible to change font color, background color in SwiftUI alert?

Let’s see how we’ll do this.

    
struct ContentView:View{
          var body: some View {
                  NavigationView{
                      
                      Button(action: {
                      }) {
                          Text("Show Alert").foregroundColor(Color.white).fontWeight(.bold)
                      }  .frame(maxWidth: .infinity,maxHeight: 40)
                          .background(Color.teal)
                          .cornerRadius(12)
                          .padding(60)
                        
                          .navigationTitle("Custom Alert View")
      
       }
   }
}

So this is what our ContentView, the main view of the app, Currently looks like. We have just added a Button and a Navigation title inside the NavigationView.

Custom Alert or Popup view in SwiftUI

Now, Embed all the content of ContentView inside the ZStack View. That’s so because ZStack Stacks the views on top of each other. So when we’ll present our Custom Alert or Popup view it will appear on top of our previous view.

struct ContentView:View{
          var body: some View {
              ZStack{
                  
                  NavigationView{
                      
                      Button(action: {

                      }) {
                          Text("Show Alert").foregroundColor(Color.white).fontWeight(.bold)
                      }  .frame(maxWidth: .infinity,maxHeight: 40)
                          .background(Color.teal)
                          .cornerRadius(12)
                          .padding(60)
                        
                          .navigationTitle("Custom Alert View")
                   }
                  
              }
       }
}

Separate view for custom alert – Image with text

Now we’ll be creating a separate view for our Custom Alert. We can create as many views as we want and then call it in our main ContentView.

struct CustomAlert: View{
    var body:some View{
      
      VStack(alignment: .leading) {
            HStack(spacing: 12) {
                Image(systemName: "exclamationmark.triangle")
                    .resizable()
                    .foregroundColor(Color.red)
                    .frame(width: 30,height: 30)
                
                Text("Alert !")
                    .fontWeight(.bold)
                    .font(.title)
                    .font(.title)
            }
            .padding(.horizontal)
            .padding(.top)
            
            Text("Something went Wrong... Try Again.")
                .font(.subheadline)
                .padding(30)
            
        }
        .background(Color.white)
        .cornerRadius(20)
        
    }
}

This is what our Custom Alert looks like. We have created a simple alert view with Text and an Image.

Alert view in main view

Now let’s see how we’ll call our alert view in our main view.

struct ContentView:View{
    @State var show = false
    var body: some View {
        ZStack{
            NavigationView{
                Button(action: {
                    withAnimation { 
                        self.show.toggle() // changing the variable state 
                    }
                })
                {
                    Text("Show Alert").foregroundColor(Color.white).fontWeight(.bold)
                }  .frame(maxWidth: .infinity,maxHeight: 40)
                    .background(Color.teal)
                    .cornerRadius(12)
                    .padding(60)
                
                    .navigationTitle("Custom Alert View")
            }

            // call Custom Alert

            if(self.show){
                VStack{
                    CustomAlert()
                }
                .frame(maxWidth: .infinity,maxHeight: .infinity)
                .background(Color.black.opacity(0.5))
                .edgesIgnoringSafeArea(.all)
                .onTapGesture {
                    withAnimation {
                        self.show.toggle()
                        
                    }
                }
            }
        }
    }
}

We have added a VStack after the NavigationView, and in that VStack we are calling the CustomAlert() view.

We have set the size of the VStack equal to the entire screen by using a frame modifier with maxWidth and maxHeight values equal to .infinity. And dimmed the background color a little by setting the color opacity to 0.5.

We have also created a show variable which is a State property and bound the VStack with this show state variable. So the alert will appear and disappear depending on the state of this show variable.

Tapping the Button in the ContentView will change the property of the show variable. And when the show variable state changes it will make the CustomAlert view appear on the screen.

And the onTapGesture of SwiftUI that we have added to the VSatck will again change the state of the show variable when we’ll tap on the screen and make the alert disappear from the screen.

Complete code

struct ContentView:View{
    @State var show = false
    var body: some View {
        ZStack{
            NavigationView{
                Button(action: {
                    withAnimation {
                        self.show.toggle()
                    }
                })
                {
                    Text("Show Alert").foregroundColor(Color.white).fontWeight(.bold)
                }  .frame(maxWidth: .infinity,maxHeight: 40)
                    .background(Color.teal)
                    .cornerRadius(12)
                    .padding(60)
                
                    .navigationTitle("Custom Alert View")
            }
            
            if(self.show){
                VStack{
                    CustomAlert()
                }
                .frame(maxWidth: .infinity,maxHeight: .infinity)
                .background(Color.black.opacity(0.5))
                .edgesIgnoringSafeArea(.all)
                .onTapGesture {
                    withAnimation {
                        self.show.toggle()
                        
                    }
                }
            }
        }
    }
}

struct CustomAlert: View{
    var body:some View{
        VStack(alignment: .leading) {
            
            HStack(spacing: 12) {
                Image(systemName: "exclamationmark.triangle")
                    .resizable()
                    .foregroundColor(Color.red)
                    .frame(width: 30,height: 30)
                
                Text("Alert !")
                    .fontWeight(.bold)
                    .font(.title)
                    .font(.title)
                
                
            }
            .padding(.horizontal)
            .padding(.top)
            
            Text("Something went Wrong... Try Again.")
                .font(.subheadline)
                .padding(30)
            
        }
        .background(Color.white)
        .cornerRadius(20)
        
    }
}