Custom Popup in SwiftUI

Step-by-Step Tutorial

Picture by Raagesh C in Unsplash.

A pop-up is a graphical user interface ( GUI ) display area, usually a small window, that suddenly appears (“pops up”) in the foreground of the visual interface. In iOS development, Popup is a modal that appears in front of app content to provide critical information or ask for a decision.

SwiftUI provides many APIs to show alerts, popovers, action sheets, and modal sheets. However, none of these allows us to present a custom popup In this article, let’s build a reusable SwiftUI component for presenting custom popups.

Getting Started

First, after creating a swiftui project, create a separate SwiftUI View. It’s convenient to design the popup as a ViewModifier that can be applied to any view:

Screenshot from the Popup Project

Screenshot from Popup project

Build the Popup View

Let’s modify and add the information we would like to show in the popup button. I’ve created a simple popup which has an icon, title and description.