How to show confetti in SwiftUI

Meet ConfettiView 🎉 — the prettiest SwiftUI-native confetti

GitHub here

Introduction

I always thought that Apple would provide their confetti from iMessages as some sort of SwiftUI component. But they don’t. I’m not sure why.

All the other confetti on the internet is very ugly.

I literally just wanted a single SwiftUI confetti view that behaved exactly like the iMessage confetti. No weird customization or modifiers.

So I was scrounging around and found this gem of an article. But the code didn’t work anymore.

So I poured through old documentation trying to bring things up to speed, and then packaged it into an easy-to-use SwiftUI view.

How to use

1. Install ConfettiView.
2. Add ConfettiView to your project.

import SwiftUI
import ConfettiView

struct ContentView: View {
    @State var showConfetti = false

    var body: some View {
        Button("Rain on me") {
            showConfetti = true
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(ConfettiView(isPresented: $showConfetti))
    }
}

Conclusion

And that’s literally it! There are some enhancements to be made, like blurring the background confetti layer and perhaps adding some customizations, but for what I was looking for (and what many of you are probably looking for) this seems to emulate the iMessage effect almost perfectly. Good luck!

GitHub here.