isak.me - a blog by isak solheim

Bi-weekly updates about things that interest me, things I have built and things I have learned.

How To Toggle Between Dynamic Text Sizes in SwiftUI Previews

In this article, I show you how to toggle between dynamic text sizes in SwiftUI previews.

.sizeCategory

To render a SwiftUI Preview with an increased text size (Dynamic Type), we use the environment modifier on our view.

#Preview {
    BarcodeView(
        code: "N000012345",
        header: "Meråpent bruker",
        footer: "Deichman"
    ).environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
}

If you want to compare your view with different text sizes, you can add more previews like so:

#Preview("Normal Text Size") {
    BarcodeView(
        code: "N000012345",
        header: "Meråpent bruker",
        footer: "Deichman"
    )
}

#Preview("Extra Large Text Size") {
    BarcodeView(
        code: "N000012345",
        header: "Meråpent bruker",
        footer: "Deichman"
    ).environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
}

This allows us to toggle between the different previews at the top of the preview canvas.