SwiftUI: Format Currency the Easy Way

Displaying (or accepting) a number as currency in a Text field is a common thing that we want to do in SwiftUI. In the example below, we set a State variable for holding the amount that we want to display, and use the format option to convert it to the users local currency. We are setting a fall back to “USD” (United States Dollars) just in case the user has not set a currency, or the currency is not available.

Before we get lost in all the cool things we are about to learn, please take a couple seconds to follow me and clap for the article so that we can help more people learn about this useful content.

Note that using the Locale.current option will automatically format the number you passed in to match the currency set on the users device. It DOES NOT automatically convert the value that was passed in to the users preferred currency.

This example also shows how we would accept a currency as input in a TextField. Using this method also prevents numbers from being stored in the amount, but doesn’t prevent them from being entered into the field. What this means for us the developers, is that we don’t have to write any validation to make sure that our amount variable is a number.

One very important thing to note here is that we are explicitly telling Swift that we are using a Decimal type. This type allows our code to be more precise and accurate, both of which are very important when dealing with currency. If you are skeptical, like I am, about people telling you something on the internet, feel free to run this simple test in your own code: .onAppear { print(0.1 + 0.2) } // prints out "0.30000000000000004" The “0.1” and “0.2” in the example are treated as the type of Double which is where the difference in dealing with currency comes in due to how each type (Double vs Decimal) is treated by the system.

// ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var amount: Decimal = 0.0
    
    var body: some View {
        VStack {
            // Default the currency to match the users locale,
            // or fall back to a certain if we can't figure out the locale
            Text(amount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
            // Displays "$0.00"
                
            // We can ensure our text to only ever display a certain type
            // of currency by using the following line (instead of the one above)
            Text(amount, format: .currency(code: "GBP"))
            // Displays ￡0.00 (no matter what locale you have choosen)
                
            // Accepting a number as input to a text field
            TextField("Amount", value: $amount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

This doesn’t only work for USD and GBP, it works for many currency formats, check out the screenshot below for a small sample of what SwiftUI can do:

There is one downside to this method of accepting a currency as input. Currently, formats other than “USD” don’t work when accepting them as input in a TextField. However, there is a work around for this issue. We can format the TextField as a number with a fraction length of 2 (or whatever number is needed to match the format of your currency). This will give us all the same validations as the currency formatter (without the currency specific piece), and allow us to get most of the way to a working solution. The example below shows how this solution could work. Once when we are ready to display the number as currency, we use the example above, and the formatter now works with any currency (at least until Apple comes out with a better solution). A big shout out goes to one of the readers of this article for calling out that Apple doesn’t currently support any other input currency other than USD.

import SwiftUI

struct ContentView: View {
    @State var amount: Decimal = 0.0
    
    var body: some View {
        Text(amount, format: .currency(code: "GBP"))
        TextField("Amount", value: $amount, format: .number.precision(.fractionLength(2)))
            .keyboardType(.decimalPad)
    }
}

If you also want to know how to format dates and times, check out this article: https://medium.com/@jpmtech/swiftui-format-dates-and-times-the-easy-way-fc896b25003b

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.

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!