This not-so serious blog post illustrates the use of various SwiftUI view modifiers. The inspiration of this blog post is Valentine's Day 2022 :)

Mark your Calendar

Valentine's Day is on February 14th and I don't want to stand with empty hands in front of my spouse. So let's mark the calendar.

struct MarkYourCalendar: View {
    @State private var vDay = Date("20220214")
    var body: some View {
        DatePicker(
            "Start Date",
            selection: $vDay,
            displayedComponents: [.date]
        )
        .datePickerStyle(.graphical)
    }
}

Using the datePickerStyle view modifier to pass in the graphical will display display an interactive calendar (or clock).

There are other DatePickerStyle's to specify the appearance and interaction of all date pickers within a view hierarchy.

The complete list of types:

• automatic
• compact
• field
• graphical (used here)
• stepperField
• wheel

P.S.: I am using here an extension on Date to initialize an instance from a string

extension Date {
    init(_ input: String) {
        self = Date.from(input)
    }
    static func from(_ input: String) -> Date {
        let df = DateFormatter()
        df.dateFormat = "yyyyMMdd"
        return df.date(from: input) ?? Date()
    }
}

Cover your tracks

The redacted view modifier is a great way to hide sensitive data and to handle loading states. In my case I don't want my spouse to know the gift just yet.

struct ValentinesDayGift: View {
    var body: some View {
        HStack {
            Text("I bought my wife: ")
            Text("She cannot know yet").redacted(reason: .placeholder)
        }
    }
}

Learn more about the redacted view modifier by reading https://serialcoder.dev/text-tutorials/swiftui/the-redacted-view-modifier-in-swiftui/

Don't be afraid to mask your feelings

Using the mask view modifier let's me create this wonderful Valentine's Day card in SwiftUI.

struct ValentinesDayGift: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Happy Valentine's Day")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)
            Image("Jeanine")
                .resizable()
                .frame(width: 200, height: 200)
                .mask(
                    Image(systemName: "heart.fill")
                        .resizable()
                )
        }
        .frame(
            maxWidth: 500,
            maxHeight: 300
        )
        .background(.purple)
    }
}

My wife thinks I am dorky but sweet. She was very happy with her special Valentine's Day card. Mission accomplished :)

The mask() modifier is different from clipShape(), because it also applies any transparency from the masking view – you get to have holes in your underlying view based on the transparency of your mask.

Learn more about the mask view modifier by reading https://www.fivestars.blog/articles/swiftui-masking/