How to Create Custom Redacted Effects on Widgets?

It is not as straightforward as you think

This article is originally published at swiftsenpai.com

In my previous article, we talked about how we can protect our users’ privacy by redacting widget data. It’s a simple process, but unfortunately, there aren’t many options available when it comes to the redacted effect.

In this article, I’ll show you how you can create your own unique redacted effect. This will enhance the visual appeal of your widget when data is redacted and make it look more professional.

Moreover, there’s something you need to be aware of. I noticed a strange behavior in iOS 16 when applying custom redacted effects to a widget. Therefore, we’ll be discussing that as well and showing you how to work around it.

So, without further ado, let’s get started!

The Straightforward Way

Let’s use the Bitcoin wallet widget we created in my previous article and apply a blur effect on the balance value.

Blur redacted effect on a widget

We can achieve this by using the redactionReasons environment key in SwiftUI to determine the current redaction state of the view.

Once we have the current redaction state, we can apply the blur effect accordingly. Here’s how:

@Environment(\.redactionReasons) var reasons

var body: some View {
    
    VStack(alignment: .leading) {
        
        Text("Bitcoin Balance")
            .font(.title2)
            .fontWeight(.bold)
            .foregroundColor(.orange)
        
        if reasons.isEmpty {
            // Show balance
            Text("0.25₿")
                .font(.headline)
                .fontWeight(.semibold)
                .foregroundColor(.gray)
        } else {
            // Hide balance
            Text("0.25₿")
                .font(.headline)
                .fontWeight(.semibold)
                .foregroundColor(.gray)
                .blur(radius: 4)
        }
    }
}

While this approach is simple and effective, it unfortunately only works on iOS 15…