# Be my SwiftUI Valentine

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.

```Swift
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).


![Screen Shot 2022-02-10 at 7.52.17 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1644857134401/tviuoz7lF.png)

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

```Swift
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.

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

![Example of using redacted view modifier](https://cdn.hashnode.com/res/hashnode/image/upload/v1644857262767/40xOWTkXh.png)

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.

```Swift
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)
    }
}
```

![Example of using mask view modifier](https://cdn.hashnode.com/res/hashnode/image/upload/v1644857102133/B1OGSP0Jm.png)

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/