Use of custom view modifier for reusability in SwiftUI

Uplift iOS Interview

"Uplift iOS Interview" is a comprehensive guide to help aspiring iOS developers soar to new heights in their careers. This book is an indispensable tool for anyone looking to crack the iOS interview and impress their future employers with their technical prowess. With in-depth coverage of Swift, AutoLayout, SwiftUI, Multithreading, Memory management so on and so forth, this book is a treasure trove of knowledge for anyone looking to uplift their iOS development career.

I want this

Custom view modifier is very powerful concept in SwiftUI which will allow you to write reusable code. If you are using same kind of modifiers throughout multiple of views, it is better to create a custom view modifier. The main benefit of custom view modifier is that it will help you to generate a good design system. Creating custom view modifiers promotes consistency, clarity, and quality in the SwiftUI application design process. It can also deliver significant competitive advantages for small team.

Conform the ViewModifier protocol when you want to create a reusable view modifier that you can apply to any view. In this example, you can notice that both buttons have the same set of modifiers(the only font difference is font) and it makes sense to reuse those modifiers.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Primary Button") {}
                .font(.title)
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .cornerRadius(20.0)
                .shadow(radius: 10.0)

            Button("Secondary Button") {}
                .font(.title2)
                .padding()
                .background(Color.orange)
                .foregroundColor(.white)
                .cornerRadius(20.0)
                .shadow(radius: 10.0)
        }
    }
}

The example below combines several modifiers to create a new modifier called CustomButtonModifier.

struct CustomButtonModifier: ViewModifier {
    var font: Font = .title

    func body(content: Content) -> some View {
        return content
            .font(font)
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .cornerRadius(20.0)
            .shadow(radius: 10.0)
    }
}

// Use it with modifier keyword
Button("Primary Button") {}
  .modifier(CustomButtonModifier())
Button("Secondary Button") {}
  .modifier(CustomButtonModifier(font: .title2))

As you can see that I have passed font as a parameter for CustomButtonModifier to differentiate primary and secondary button. You can apply the custom view modifier using modifier(_:) keyword but I prefer to create a function using the name of the custom modifier inside the View extension. It makes the code more readable.

extension View {
    func customButtonModifier(font: Font = .title) -> some View {
        modifier(CustomButtonModifier(font: font))
    }
}

// Use it without modifier keyword
Button("Primary Button") {}
  .customButtonModifier()

Output

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("Primary Button") {}
                .customButtonModifier()
            Button("Secondary Button") {}
                .customButtonModifier(font: .title2)
        }
    }
}

struct CustomButtonModifier: ViewModifier {
    var font: Font = .title

    func body(content: Content) -> some View {
        return content
            .font(font)
            .padding()
            .background(Color.orange)
            .foregroundColor(.white)
            .cornerRadius(20.0)
            .shadow(radius: 10.0)
    }
}

extension View {
    func customButtonModifier(font: Font = .title) -> some View {
        modifier(CustomButtonModifier(font: font))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Rev Up Your iOS Skills: Take a Dynamic Learning Journey

iOS Career Boost is the ultimate learning journey to elevate your iOS development career through a dynamic blend of visual learning, handy cheat sheets, coding practice materials, and expertly curated tips and tricks

Get Ready to Shine: Mastering the iOS Interview

• Uplift iOS Interview - A Comprehensive Guide to iOS Interview
• Xcode Cheat Sheet for Swift
• Xcode Cheat Sheet for SwiftUI

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.

Connect with me on

Twitter and LinkedIn and don't hesitate to reach out with any questions about this post. Thank you for reading.