Quick Tip Icon
Quick Tip

Interpolate text with custom foreground style in SwiftUI

SwiftUI lets us style portions of text by interpolating Text inside another Text and applying available text modifiers, such as foregroundColor() or font().

Starting from iOS 17 we can apply more intricate styling to ranges within a Text view with foregroundStyle().

For example, we can color a word with a gradient.

Screenshot of hello world text where world is colored with linear gradient Screenshot of hello world text where world is colored with linear gradient
struct ContentView: View {
    let gradient = LinearGradient(
        colors: [.blue, .green],
        startPoint: .leading,
        endPoint: .trailing
    )
    
    var body: some View {
        Text("Hello, \(Text("world").foregroundStyle(gradient))!")
            .bold()
            .font(.title)
            .textCase(.uppercase)
    }
}

And if you are interested in more advanced text styling, you can take a look at the new ShaderLibrary. In iOS 17 Metal shaders get automatically converted to ShapeStyles that then can be passed to foregroundStyle().

Integrating SwiftUI into UIKit Apps by Natalia Panferova book coverIntegrating SwiftUI into UIKit Apps by Natalia Panferova book cover

Check out our book!

Integrating SwiftUI into UIKit Apps

Integrating SwiftUI intoUIKit Apps

UPDATED FOR iOS 17!

A detailed guide on gradually adopting SwiftUI in UIKit projects.

  • Discover various ways to add SwiftUI views to existing UIKit projects
  • Use Xcode previews when designing and building UI
  • Update your UIKit apps with new features such as Swift Charts and Lock Screen widgets
  • Migrate larger parts of your apps to SwiftUI while reusing views and controllers built in UIKit