I would love it if you would support me by watching the video that I made for this content:

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

I would GREATLY appreciate it if you would subscribe to my YouTube channel so that I can keep putting out great free content: https://www.youtube.com/@jpmtechdev

Basic TextField

Starting off with the most basic implementation of a TextField, we have a state variable that holds some text, and then display that text to the user

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            TextField("Enter Text", text: $text)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Changing the scroll direction in a TextField

In this next implementation, we will change the scroll direction from the default horizontal direction to vertical. This will allow the TextField to expand vertically when the content reaches the edge of the component.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // Adding an axis here allows the text to scroll in whatever direction you specify.
            // The default behavior is horizontal, adding vertical lets the field expand vertically instead of the usual horizontal scrolling behavior
            TextField("Enter Text", text: $text, axis: .vertical)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Adding a prompt to a TextField

Adding a prompt to a TextField helps users better understand what they should enter into the field.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // Adding a prompt can help your users understand what kind of input is expected in this field
            TextField("Street Address", text: $text, prompt: Text("123 Main St."))
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

TextField with a trailing closure

The next text field allows you to pass a trailing closure as a parameter. However, it appears that only the text is displayed and not the image. Don’t worry though, we will cover how to fix that in a future article.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // Another way to add a label to a text field
            // Even though you can pass anything in the view, this will still only display text
            TextField(text: $text) {
                HStack {
                    Image(systemName: "rectangle.and.pencil.and.ellipsis")
                    Text("Enter Text")
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Passing a value to a text field

In the next example, we are using the API for the text field that gives us a “value” parameter instead of a “text” parameter. This value takes in things like numbers or dates and can even give you automatic validation and formatting for whatever local the user is in. For more on these features, check out another article I wrote on those topics here:

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var amount = 0.0
    
    var body: some View {
        VStack {
            // Using the built in formatters is a great way to automatically get validation
            // and limit the type of expected input for a TextField.
            // Notice that this implementation uses "value" instead of "text" in the API
            TextField("Enter Currency Amount", value: $amount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))

            TextField("Enter Number", value: $amount, format: .number.precision(.fractionLength(0)))
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Describing the type of keyboard

In our next example, we are telling the app what kind of digital keyboard we expect to use with this input field. Swift has several built-in options that can help guide your users to enter the correct data in the correct field. However, this modifier only applies to digital keyboards, so if your user has a hardware keyboard (attached to an iPad for example), then this keyboard suggestion may not be shown to the user. Just keep that in mind when you are coding your own projects.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // You can help the user input the correct text by giving them a keyboard that displays automatically
            // However, if they connect a physical keyboard, the digital keyboard won't display so keep that in mind when you use it
            TextField("Enter Phone Number", text: $text)
                .keyboardType(.phonePad)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Adding a content type to your TextField

By adding a content type, you are helping the auto-fill feature understand what kind of data is expected in this input. This can also be helpful in guiding your users to entering the correct data. Again with this option, Swift has several data-types built-in. Feel free to give this one a shot and see which ones you can use to improve your own apps. In the screenshot below, I don’t have the auto-fill suggestions turned on in my simulator so you won’t be able to see the suggestion on my device but it should work on your device if you have the auto-fill suggestions turned on.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // Using the textContentType modifier helps the user by allowing the systems auto-fill feature
            // to recognize the type of content and try to automatically fill in the correct data
            TextField("Email", text: $text)
                .textContentType(.emailAddress)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Securing data in a TextField

Technically this is its own component and not a TextField, but since it acts very similar to a TextField and because, as developers, we should care about the privacy of our users data, I have decided to add this type here. We have also decided to help out the auto-fill feature by passing a content type of password to re-enforce what kind of data should be entered here.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // If you to accept secure text in your app, you will want to use the secure field
            SecureField("Password", text: $text)
                .textContentType(.password)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Styling a TextField

With SwiftUI there isn’t much we can do in the way of styling a TextField. I have added examples for some of the most common use cases below (such as adding a border to the TextField) and one not so common use case just to make life more fun.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    
    var body: some View {
        VStack {
            // The only built-in styling for a text field is plain (which is what every field is by default)
            // or roundedBorder, which allows you to see where the edges of the field are
            TextField("Enter Text", text: $text)
                .textFieldStyle(.roundedBorder)
            
            // You can also add your own custom styling to a textfield if you want more control over how it looks
            TextField("Enter Text", text: $text)
                .padding(5)
                .overlay(
                    RoundedRectangle(cornerRadius: 7)
                        .stroke(.secondary.opacity(0.5), lineWidth: 1)
                )

            // if you want a fun looking TextField, this is the one you can use
            TextField("Enter Text", text: $text)
                .padding()
                .background(
                    RadialGradient(
                        gradient: Gradient(colors: [.blue, .purple, .red]),
                        center: .center,
                        startRadius: 0,
                        endRadius: 200
                    )
                )
                .foregroundStyle(.white)
                .clipShape(RoundedRectangle(cornerRadius: 7))
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to support my work check out my YouTube channel here: https://www.youtube.com/@jpmtechdev. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

I would GREATLY appreciate it if you would subscribe to my YouTube channel so that I can keep putting out great free content: https://www.youtube.com/@jpmtechdev

Jumping right in

This really is so easy and needs so little information that we are going to jump right in to the code.

Let’s start by creating a new project and choose an iOS Sticker Pack App (as you can see in the image below). We will then click Next, give it a name, and store it on our computer and then click Create.

The next thing you will need are a few images to display in your sticker pack. Once you have your images ready, you can choose Stickers from the project navigator, then select the Sticker Pack folder and simply drag and drop your images to the image area. I have added a couple images for my Medium profile as the for our example app (as you can see in the image below).

Before you run the app you may want to add an app icon so that you the app will show up in the simulator or on your device.

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to support my work check out my YouTube channel here: https://www.youtube.com/@jpmtechdev. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

I would GREATLY appreciate it if you would subscribe to my YouTube channel so that I can keep putting out great free content: https://www.youtube.com/@jpmtechdev

Initial Setup

Since our focus in this article is on the various APIs for a button, we won’t run any code in the button action, but each button will have a comment to help guide you on where you will do that work in each button example. These brackets that have the code comment in them are called trailing closures. If you have ever used a lambda in Kotlin or and anonymous function in JavaScript, trailing closures operate in a very similar way. They are a block of code that can be run when the button is clicked.

All of these buttons are to be used inside another view. For example, if you place a button inside of the ContentView, it should look like the following. For the sake of simplicity, these wrapping views have been left out throughout the examples below to help us focus on the button code itself.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Click Me") {
                // do some work here
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Basic Button

Starting out with the most basic button, we can pass a string to our button and easily get a default button added to the screen.

Button("Click Me") {
    // do some work here
}

Button with an SF Symbol

Our next button is slightly more advanced because we are adding an SF Symbol to the button itself. SF Symbols are icons that are built-in to the operating system itself, which means you can use them for free since your app runs on the operating system.

Button("Settings", systemImage: "gear") {
    // do some work here
}

Button with an SF Symbol and a role

A role helps guide the intent of the button for the user. For example, when we add a destructive role to the button, the button turns red to help indicate to the user that clicking this button does something destructive.

Button("Delete Me", systemImage: "trash", role: .destructive) {
    // do some work here
}

Button Styles

There are several different button styles that are built-in to SwiftUI that you can use for free. Each of these styles gives the button a slightly different appearance, and they can be combined with any other button options that we have already demonstrated above to give an even more unique appearance. If you want to learn more about creating your own button styles, feel free to check out another article I wrote on that same topic here: https://medium.com/@jpmtech/create-a-custom-buttonstyle-in-swiftui-98f66231f2c0

Button("Click Me") {
    // do some work here
}
.buttonStyle(.borderedProminent)

Button("Click Me") {
    // do some work here
}
.buttonStyle(.bordered)

Button("Click Me") {
    // do some work here
}
.buttonStyle(.plain)

Button with a custom label

All of the buttons above look good and would fit in well with any system app. But what if we wanted our button to stand out, and look completely unique. In that case, we can specify a custom label. This custom label can be any view, and can have any properties we want. For example, the button below has a VStack and a linear gradient and we are event changing the font, padding, colors, and scale. If you are looking for a button that stands out in a crowd, this is the button API that you will want to use.

Button {
    // do some work here
} label: {
    VStack {
        Text("Learn SwiftUI Buttons")
        Image(systemName: "wand.and.stars")
            .imageScale(.large)
    }
    .font(.title)
    .fontWeight(.bold)
}
.padding()
.foregroundStyle(.white)
.background(LinearGradient(colors: [.red, .orange, .indigo, .blue, .cyan], startPoint: .bottomLeading, endPoint: .topTrailing))
.clipShape(RoundedRectangle(cornerRadius: 7))

We can use this same method to create a button that is an icon only button that changes it’s icon with a piece of state.

struct RecordingButton: View {
    @State var isRecording = false
    
    var body: some View {
        Button {
            isRecording.toggle()
        } label: {
            Image(systemName: isRecording ? "stop.circle" : "play.circle")
        }
    }
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to support my work check out my YouTube channel here: https://www.youtube.com/@jpmtechdev. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

I would GREATLY appreciate it if you would subscribe to my YouTube channel so that I can keep putting out great free content: https://www.youtube.com/@jpmtechdev

Using Enumerated in a ForEach in SwiftUI with a basic array

In our first example, we will iterate over an array that holds simple types. This allows us to use the ForEach and have access to the index for the array inside our view. While this example is fairly easy to follow, it isn’t a great real world example. For a more real world example, we can jump to the next section.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    let people = ["Chase", "John", "Jane", "Joe", "Jenny", "Jack"]
    
    var body: some View {
        List {
            Section {
                // Starting from the outside and moving in:
                // Wrapping the enumeration with an Array gives you an array of tuples that your ForEach can itterate over.
                // The enumeration creates a tuple of the offset (index) and the element (object) that we will itterate over.
                // The offset used in the ID parameter is the name of the first element in the tuple from the enumeration and is the index for the array.
                ForEach(Array(people.enumerated()), id: \.offset) { index, person in
                    Text("\(person), \(index)")
                }
            } header: {
                Text("Iterating over simple types")
            }
        }
    }
}

#Preview {
    ContentView()
}

Using an Enumerated in a ForEach in SwiftUI with an array of objects

In this example we are using a custom object inside of our array. This is a much more realistic example. In this example we are using the id parameter from each User object as the id parameter. Just like the first example we have access to the index in our view. We also have access to the properties from our object if we need them.

//  ContentView.swift
import SwiftUI

struct User: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    let users = [
        User(name: "Chase"),
        User(name: "John"),
        User(name: "Jane"),
        User(name: "Joe"),
        User(name: "Jenny"),
        User(name: "Jack")
    ]
    
    var body: some View {
        List {
            Section {
                // Starting from the outside and moving in:
                // Wrapping the enumeration with an Array gives you an array of tuples that your ForEach can itterate over.
                // The enumeration creates a tuple of the offset (index) and the element (object) that we will itterate over.
                // The element used in the ID parameter is the name of the second element in the tuple from the enumeration and is the object that we want to itterate over.
                ForEach(Array(users.enumerated()), id: \.element.id) { index, user in
                    Text("\(user.name), \(index)")
                }
            } header: {
                Text("Iterating over objects")
            }
        }
    }
}

#Preview {
    ContentView()
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to support my work check out my YouTube channel here: https://www.youtube.com/@jpmtechdev. Thank you for taking the time to check out my work!

I would love it if you would support my work by watching the video I made for this content:

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content. If you are looking for how to create a multi-select button (similar to a checkbox) check out another article I wrote here: https://medium.com/@jpmtech/create-a-custom-multi-select-button-in-swiftui-ebe1de8cd8aa

Jumping right in

The code below is the power house for the project. This code creates a custom SwiftUI view that allows us to create most any kind of single-select button that we could dream up.

struct SingleSelectButtonView<T: Identifiable & Hashable, Content: View>: View {
    let options: [T]
    @Binding var selection: T?
    @ViewBuilder let content: (T) -> Content

    /*
     init methods aren't required for SwiftUI to work, however in this example,
     I wanted to see only the variables at the call site (not the parameter names for the views).
     */
    init(
        _ options: [T],
        _ selection: Binding<T?>,
        @ViewBuilder _ content: @escaping (T) -> Content
    ) {
        self.options = options
        self._selection = selection
        self.content = content
    }

    var body: some View {
        // I have chosen to use a Group here to allow the parent component decide how this view should be displayed
        Group {
            ForEach(options, id: \.self) { option in
                Button {
                    selection = option
                } label: {
                    content(option)
                }
                .buttonStyle(.plain)
            }
        }
    }
}

Create a Radio Button in SwiftUI

In our example below we have a couple of usage examples. The first is placing the SingleSelectButtonView in an HStack as a quick example of the power of using a Group in our custom component. This gives us a horizontal set of buttons, and each time one is selected, the button changes state and gets selected while any other button that was selected gets removed.

The second example in this code block we show just how easy it is to make a radio button using our SingleSelectButtonView.

import SwiftUI

struct CustomOption: Identifiable, Hashable {
    let id = UUID()
    let text: String
}

struct ContentView: View {
    let customOptions = [CustomOption(text: "Option 1"), CustomOption(text: "Option 2"), CustomOption(text: "Option 3"), CustomOption(text: "Option 4"), CustomOption(text: "Option 5")]
    @State var selectedOptions = [CustomOption?]()
    @State var singleSelectedOption: CustomOption?
    
    var body: some View {
        VStack {
            // This gives us a horizontal stack of buttons that turn blue when selected
            HStack {
                SingleSelectButtonView(customOptions, $singleSelectedOption) { item in
                    Text(String(describing: item.text))
                        .padding(.horizontal, 10)
                        .padding(.vertical, 5)
                        .background(singleSelectedOption == item ? .blue : .gray.opacity(0.3))
                        .foregroundColor(singleSelectedOption == item ? .white : .primary)
                        .cornerRadius(8)
                }
            }
            
            // Radio button example
            SingleSelectButtonView(customOptions, $singleSelectedOption) { item in
                HStack {
                    Image(systemName: singleSelectedOption == item ? "largecircle.fill.circle" : "circle")
                        .foregroundStyle(singleSelectedOption == item ? .blue : .primary)
                    Text(item.text)
                }
            }
            
            Text("Selected: \(singleSelectedOption?.text ?? "None")")
        }
        .padding()
    }
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

I would love it if you would support my work by watching the video I made on this content:

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Jumping right in

The code below is the power house for the project. This code creates a custom SwiftUI view that allows us to create most any kind of multi-select button that we could dream up.

struct MultiSelectButtonView<T: Identifiable & Hashable, Content: View>: View {
    let options: [T]
    @Binding var selection: [T?]
    @ViewBuilder let content: (T) -> Content

    /*
     init methods aren't required for SwiftUI to work, however in this example,
     I wanted to see only the variables at the call site (not the parameter names for the views).
     */
    init(
        _ options: [T],
        _ selection: Binding<[T?]>,
        @ViewBuilder _ content: @escaping (T) -> Content
    ) {
        self.options = options
        self._selection = selection
        self.content = content
    }
    
    var body: some View {
        // I have chosen to use a Group here to allow the parent component decide how this view should be displayed
        Group {
            ForEach(options, id: \.self) { option in
                Button {
                    if selection.contains(option) {
                        selection.removeAll { $0 == option }
                    } else {
                        selection.append(option)
                    }
                } label: {
                    content(option)
                }
                .buttonStyle(.plain)
            }
        }
    }
}

Create a Checkbox in SwiftUI

In our example below we have a couple of usage examples. The first is placing the MultiSelectButtonView in an HStack as a quick example of the power of using a Group in our custom component. This gives us a horizontal set of buttons, and each time one is selected, the button changes state and gets added to our array of selected options.

The second example in this code block we show just how easy it is to make a checkbox using our MultiSelectButtonView.

import SwiftUI

struct CustomOption: Identifiable, Hashable {
    let id = UUID()
    let text: String
}

struct ContentView: View {
    let customOptions = [CustomOption(text: "Option 1"), CustomOption(text: "Option 2"), CustomOption(text: "Option 3"), CustomOption(text: "Option 4"), CustomOption(text: "Option 5")]
    @State var selectedOptions = [CustomOption?]()
    
    var body: some View {
        VStack {
            // This gives us a horizontal stack of buttons that turn blue when selected
            HStack {
                MultiSelectButtonView(customOptions, $selectedOptions) { item in
                    Text(String(describing: item.text))
                        .padding(.horizontal, 10)
                        .padding(.vertical, 5)
                        .background(selectedOptions.contains(item) ? .blue : .gray.opacity(0.3))
                        .foregroundColor(selectedOptions.contains(item) ? .white : .primary)
                        .cornerRadius(8)
                }
            }
            
            // This gives us an example of a checkbox
            MultiSelectButtonView(customOptions, $selectedOptions) { item in
                HStack {
                    Image(systemName: selectedOptions.contains(item) ? "checkmark.square.fill" : "square")
                        .foregroundStyle(selectedOptions.contains(item) ? .blue : .primary)
                    Text(String(describing: item.text))
                }
            }
            
            Text("Selected: \(selectedOptions.map { String(describing: $0!.text) }.joined(separator: ", "))")
        }
        .padding()
    }
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Most Sheet APIs

Many developers (including myself) have writing code that is similar to the following. In this example, we are passing a binding to the sheet. Once in the sheet view, we are using that binding to close the sheet. There isn’t really much wrong with this implementation except that our sheet view has an unnecessarily long API, and it would probably be worse if this was more than a quick tutorial. So what do we do to fix it?

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var isShowingMyCustomSheet = false
    
    var body: some View {
        VStack {
            Button("Toggle the Sheet") {
                isShowingMyCustomSheet.toggle()
            }
        }
        .padding()
        .sheet(isPresented: $isShowingMyCustomSheet) {
            // our long sheet API
            MySheetView(isShowingMyCustomSheet: $isShowingMyCustomSheet)
        }
    }
}

struct MySheetView: View {
    @Binding var isShowingMyCustomSheet: Bool
    
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Button {
                    isShowingMyCustomSheet.toggle()
                } label: {
                    Image(systemName: "xmark")
                }
            }.padding()
            
            Spacer()
            // If you want this image for your project, you can save the title 
            // image from this article to your project file
            Image(.poopEmojiCharacter)
                .resizable()
                .scaledToFit()
            Spacer()
        }
    }
}

#Preview {
    ContentView()
}

Environment variables for the win

In this cleaned up version of the sheet view, we swapped the Binding to the parents state variable with an environment variable. This environment variable is meant to dismiss any view. The dismiss environment variable works with sheets and NavigationStacks, and is a great tool to have in your developer toolbelt.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var isShowingMyCustomSheet = false
    
    var body: some View {
        VStack {
            Button("Toggle the Sheet") {
                isShowingMyCustomSheet.toggle()
            }
        }
        .padding()
        .sheet(isPresented: $isShowingMyCustomSheet) {
            // Our short sheet API
            MySheetView()
        }
    }
}

struct MySheetView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack {
            HStack {
                Spacer()
                Button {
                    dismiss()
                } label: {
                    Image(systemName: "xmark")
                }
            }.padding()
            
            Spacer()
            // If you want this image for your project, you can save the title 
            // image from this article to your project file
            Image(.poopEmojiCharacter)
                .resizable()
                .scaledToFit()
            Spacer()
        }
    }
}

#Preview {
    ContentView()
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Initial Setup

If you have not yet setup push notifications in your app or if you need a refresher with push notifications, you will want to start with another article I wrote that has everything you need to know to get started with push notifications: https://medium.com/@jpmtech/your-complete-guide-to-push-notifications-in-swiftui-8a13f5588662

Why I needed to modify notifications on device

You may be asking, why wouldn’t you just make the modifications for the push notification in the back-end service, which is a valid question. However, in an app that I am building for a client, we are using two different third party sources that can both send notifications. Neither source had a spot in their configuration to specify the sound that the notification could play, and neither source knew about the badge count that was sent in the notification from the other service. These issues of constantly incorrect badge counts and no sounds for notifications, are what led me to learn about the super power of changing the content of a notification on device and may also be beneficial for others to learn how to do the same thing.

Adding a Notification Service Extension

A notification service extension is a target that gives our app the ability to intercept the push notification as it comes in, but before it is displayed to the user. To add a notification service extension to your app, go to File -> New -> Target and search for notification, then choose Notification Service Extension:

Give your extension a name (I called mine NotificationServiceExtension), then click Finish.

Xcode will then ask if you want to activate your new target, and you can choose the default (which is currently Activate).

Configure Your Project

Like we mentioned in the initial setup step, if your project hasn’t been set up for push notifications, now is the chance to go ahead and do that. Once that is done there are a couple other settings we will need to make sure we add so that our notification service extension works as expected. Go into the Signing and Capabilities section for your app target. Once there we will need to ensure we have the Background Mode capability for Remote Notifications. We will also need to add the App Group capability and add a new group name. These names typically start with the word “group.” then follow the reverse domain name notation (similar to your Bundle ID) followed by your app name (since these app groups must also be unique). For example, I named my App Group: “group.io.jpmtech.push-notifications-example”, a useful bonus tip is that you copy the name before clicking save, you won’t have to type it again in the next step and can be confident that the strings match in both places.

Next we will go over to the NotificationServiceExtension target and again go to the Signing and Capabilities section and add an App Group capability and we can paste the name from app target, or it may populate automatically in which case you can simply check the box to turn it on.

Modify Push Notifications on Device

With the setup and configuration out of the way, we are ready to modify our push notification content. There is one last thing that you will need to know before we jump into the code and start modifying push notifications. Our payload for the notification must include "mutable-content": 1 this tells our extension that it is allowed to change the content in the push notification. If this field is left off, or set to zero, we will not be able to change the content of the push notification.

Going to the sample code that Apple gives us for free when we added our notification service extension, we can see that we are attempting to make a copy of the the content in the notification if it is mutable. If the content is mutable (meaning that we have added the mutable content flag and it’s value is set to 1) then we can change the content in the push notification. The example code shows us out of the box how we can modify the title. We can also modify anything else that a push notification might have like the sound, badge count, etc. We can also use these methods to decrypt any data or download any images that may be included in the push notification payload.

//  NotificationService.swift
import UserNotifications

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            // Modify the notification content here...
            bestAttemptContent.title = "\(bestAttemptContent.title) [modified]"
            
            contentHandler(bestAttemptContent)
        }
    }
    
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }

}

If you want to learn more about what you can do with the Push Notification Extension, feel free to check out Apples docs here: https://developer.apple.com/documentation/usernotifications/modifying-content-in-newly-delivered-notifications

Testing our Notification Service Extension

When testing the service extension, you won’t be able to add break points or print statements like you are use to with the rest of your project. You will also want to use the “Testing remote push notifications” section from my other article to ensure you are sending a notification from a remote service since the notification service extension won’t register a notification payload that has been dragged and dropped onto the simulator. Just be sure to add the "mutable-content": 1 flag to the payload before sending it. When you send the payload, you should see the title appear on the device with the content “[modified]” appended to the end of the title.

Bonus tip

If you are having a hard time getting this to work on the simulator, make sure you have everything set up correctly in the configuration steps and then reset the simulator you are testing with (using the Erase All Content and Settings option in the simulators Device menu), and try sending the notification again.

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Option 1: The Easy Way

The easiest way to use one image and have it auto-magically work everywhere is to use SF Symbols. SF Symbols is a massive library of already built symbols that you get for free. These symbols are already setup for light/dark mode, some have multiple colors that they can display at once, they are designed to look great at any scale, you can create your own fully custom SF Symbols from scratch, and some of the symbols are already setup to animate with a simple modifier. If you want to learn more about SF Symbols and how to use them in your app, check out this article: https://medium.com/@jpmtech/using-sf-symbols-in-your-app-designs-6f7fb4c3e63e

Option 2: The slightly less easy way

But what if we really wanted to use a custom image, and didn’t want to learn about how great SF Symbols are, and we just want to add an image to our app and be done with it. SwiftUI and Xcode also make that easy. Below is the image that I will use for the demo project. I chose to use an SVG so that it would easily and cleanly scale, however, Medium doesn’t allow SVGs to be uploaded in an article. I apologize that the image shared is not the exact same image, but it should get you close enough to learn what you need to in order to re-create this in your own project.

In our Xcode Assets file, we will add a new image asset and make a few changes to the settings. First we will change the name to match what we want it to be (the default name is “image”). Next we will change the Render As setting to be a “Template Image”, this setting gives us the ability to change the color of the image and allows it to work with light/dark mode colors or system colors if we wanted to use this in a Button for example. Since I am uploading an SVG that image type is infinitely re-scalable so I also checked the box for Preserving Vector Data to make sure that all the data is there at any scale. I also changed the Scales option to be a Single Scale, because I want the same image to be displayed no matter what the pixel density of the device is and with the scalability of an SVG I know that image will be clear at any scale.

With those settings changes in place, we are ready to start using our image in code. As you can see in the code below, we can use system colors and change the color and size of our image. It even works with system features like automatically changing colors to match the text on a button.

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(.alien)
                .resizable()
                .scaledToFit()
                .foregroundStyle(.red)
            
            Image(.alien)
                .resizable()
                .scaledToFit()
                .frame(width: 250)
                .foregroundStyle(.green)
            
            Image(.alien)
                .resizable()
                .scaledToFit()
                .frame(width: 100)
                .foregroundStyle(.blue)
            
            Button {
                // do something here
            } label: {
                HStack {
                    Image(.alien)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 40)
                    
                    Text("Click me")
                }
            }.buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Jumping straight to the code

AppStorage is a property wrapper that gives us quick and easy access to UserDefaults in SwiftUI. At the top of the following code, you can see we are calling “@AppStorage” which looks for the “customKey” we pass to the method inside the UserDefaults storage. If the key exists it will give us the value back, if it doesn’t exist then it will use the default value we are giving it (which in our example is an empty string). To update that same value with a new one, we can simply set it to a new value (like we are doing in our “Save your name” button below.

If you decide to use AppStorage in your app, don’t forget to add the PrivacyManifest file to your app or your app review may get denied. Learn how to set that up here: https://medium.com/@jpmtech/privacy-manifest-for-your-ios-app-bce634c1b619. If you want to learn more about UserDefaults, feel free to check another article I wrote on that topic: https://medium.com/@jpmtech/userdefaults-in-swift-31384fa8aef7

//  ContentView.swift
import SwiftUI

struct ContentView: View {
    @AppStorage("myCustomKey") var myCustomValue = ""
    
    var body: some View {
        VStack {
            Button("Save your name") {
                myCustomValue = "Little Johnny"
            }
            
            if !myCustomValue.isEmpty {
                Text("Hi \(myCustomValue)!")
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

App storage can hold several basic data types (anything that UserDefaults can store). However, it is limited in how much data you can store (though it appears this only applies to tvOS) and the kind of data you want to store (the system was designed to store small pieces of data that your app might need at startup, such as playback speed or volume).

Bonus Tip

If you want to see all the information that is stored in UserDefaults at once, you can add the following lines of code to any view in your app. This will give you the path to the Preferences file for your app. Opening the plist file in that folder will show you the data that can be accessed in UserDefaults.

.onAppear {
    print(URL.libraryDirectory.appending(path: "Preferences").path())
}

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it (just be nice about it). If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!