Formatting data inside SwiftUI Text views

I’ve just started a new "Nil Coalescing" YouTube channel, and in the first video I take a closer look at how we can use FormatStyle and Text.DateStyle directly inside SwiftUI Text views to format values inline using string interpolation. This approach allows us to display arrays of strings, measurements, dates and other types of data in a clean, declarative way without writing additional formatting code.

If you enjoy video content, make sure to check out the video on YouTube and subscribe to our channel.

▶️ Formatting Data inside SwiftUI Text Views

In this post, I’ll go through the same examples I cover in the video, with written explanations and code you can easily reference or copy as needed.

# Interpolation and formatting in Text

Text is one of my favorite components in SwiftUI. It looks simple at first, but it handles a significant amount of logic internally. It has some really useful capabilities that are not immediately obvious, and one of my favorites is the ability to format values directly inside string interpolation.

When we initialize a Text view from a string literal, SwiftUI treats it as a LocalizedStringKey. In addition to enabling automatic localization, LocalizedStringKey supports interpolation of values and lets us provide an optional format parameter, which is intended for formatting dates, numbers, measurements, and other types of data directly inside the text view.

let date = Date()
        
Text("Today's date is \(date, format: .dateTime.day().month()).")

# Formatting arrays of strings

When interpolating an array of strings inside a Text view, we can apply the list format style and specify the list type. SwiftUI will turn the array into a grammatically correct list and automatically include a conjunction — like "and" or "or" — based on the list type we choose.

let activities = ["hiking", "swimming", "cycling"]
           
// Weekend activities: hiking, swimming, and cycling
Text("Weekend activities: \(activities, format: .list(type: .and))")

The format including the conjunction, will be adapted to the user’s locale, so we don’t need to add any extra logic to display list data in a natural way.

let activités = ["randonnée", "natation", "vélo"]

// Activités du week-end: randonnée, natation et vélo
Text("Activités du week-end: \(activités, format: .list(type: .and))")
    .environment(\.locale, Locale(identifier: "fr"))

# Displaying measurements inline

Displaying measurements inline is another case where interpolation with format styles is especially useful. Instead of converting units ourselves or building strings manually, we can just interpolate a Measurement value and use the measurement format. SwiftUI will take care of converting and displaying measurements using the most appropriate unit.

We can set the value in whatever unit we prefer, like meters in our example, and SwiftUI will automatically display it in miles for users in the US, or kilometers for users in New Zealand, without any extra logic on our part.

let distance = Measurement(value: 3200, unit: UnitLength.meters)

// You walked 2 mi.
Text("You walked \(distance, format: .measurement(width: .abbreviated)).")
    .environment(\.locale, Locale(identifier: "en_US"))

// You walked 3.2 km.
Text("You walked \(distance, format: .measurement(width: .abbreviated)).")
    .environment(\.locale, Locale(identifier: "en_NZ"))

We can also control how the unit is shown - with a short abbreviation, or a full name. It keeps the code clean, and the result is always localized and consistent.

# Formatting dates

Dates can be formatted in two different ways. To show a static date, like the time of an event, the format parameter can be used just like with arrays and measurements.

let eventDate = Calendar.current.date(
    from: DateComponents(year: 2025, month: 5, day: 5, hour: 13)
)!

// Event time: 1:00 PM
Text("Event time: \(eventDate, format: .dateTime.hour().minute())")

But if we want to display dynamic information, like the time left until the event, we can use the style parameter instead. Applying styles like relative, offset and timer, will result in an autoupdating date without any additional code.

Text("\(eventDate, style: .relative) left until the event")
    .monospacedDigit()

The relative style, that we are using in our example, displays the date as relative to now, and the Text view automatically refreshes. When displaying dynamic times like this it’s also a good idea to apply the monospacedDigit() modifier to the Text. It makes sure that all numeric characters take up the same width, so the UI doesn’t jitter as the value changes.

Animated countdown displaying '8 min, 44 secs left until the event' with the time decreasing in real time

These are just a few examples of how we can format data directly inside a Text view using interpolation. It keeps the code simple, handles localization automatically, and works great for displaying structured or time-sensitive information without much effort.

If you’re interested in learning more about how Text and other core components work in SwiftUI, and how to use the framework effectively in your projects, check out my book SwiftUI Fundamentals. It combines what I’ve learned from using SwiftUI since its release and working on its source code at Apple, to give you a solid understanding of the most important aspects of the framework.

For more resources on Swift and SwiftUI, check out my other books and book bundles.

If you are enjoying our blog and would like to support us, you can sponsor us on GitHub.

Subscribe to our monthly newsletter to get exclusive Swift and SwiftUI tips, project updates, behind-the-scenes insights, and special discounts on our books.