Skip to content

Previewing your screenshots

Arnaud Joubay edited this page Jul 20, 2023 · 2 revisions

Previewing your screenshots

The most versatile way is to create a new file which calls AspirinShotPreview on your Screenshot (hero, why, how, success) and matches them to your screenshot views.

struct ScreenshotsASApp_Previews: PreviewProvider {
    static var previews: some View {
        AspirinShotPreview(
            screenshots: [.hero, .why, .how, .success]
        ) { screenshot in
            switch screenshot {
                case .hero: HeroScreenshotView()
                case .why: WhyScreenshotView()
                case .how: HowScreenshotView()
                case .success: SuccessScreenshotView()
                default: EmptyView()
            }
        }
    }
}

In a PreviewProvider

💡 In your Preview panel, prefer Selectable (arrow in a box icon) over Live (play button) to remove the device frame of your currently selected. This way the screenshot will be displayed exactly as exported.

  • AspirinShotPreview: mini-app to browse all screenshots & localizations
  • ScreenshotPreviews: preview the given view in all display sizes (you can specify a locale and orientation)
  • .screenshotPreview(): preview the given view in a given locale, screenFormat, orientation or device

By giving ScreenshotPreviews a Screenshot (usually the one corresponding to the view), it will automatically adjust the selection of display sizes and orientations

struct HeroScreenshot_Previews: PreviewProvider {
    static var previews: some View {
        ScreenshotPreviews(.hero, in: "fr") {
            HeroScreenshotView()
        }
    }
}

or, if you want to see all sizes at once, just replace ScreenshotPreviews with ScreenshotPreviewsBoard

struct HeroScreenshot_Previews: PreviewProvider {
    static var previews: some View {
        ScreenshotPreviewsBoard(.hero, in: "fr") {
            HeroScreenshotView()
        }
    }
}

but the ScreenshotPreviews takes all kinds of formats, so if you want to test your design beyond the scope of your screenshot, you can try more inits, such as:

ScreenshotPreviews(in: "fr", formats: .iPhone_5_5(.landscape)) {}
ScreenshotPreviews(in: "fr", for: .iOS(.landscape)) {}
ScreenshotPreviews(in: "fr", for: [.iOS, .iOS(.landscape)]) {}

Launched within your app

To launch AspirinShotPreview from within your app using a hidden button or custom gesture.

  • .aspirinSheet: modifier to present the AspirinShotPreview in a Sheet
  • AspirinButton: a button you can put anywhere to present the AspirinShotPreview in a Sheet

Launched in place of your app

An easy way to launch the AspirinShotPreview using a custom Scheme.

  • .aspirinShot: modifier to place on your root view to launch the AspirinShotPreview instead of your app when the launch argument -AspirinShot 1 is set.

My screenshots look weird in the previews

This is probably because you didn't use a template (eg, ScreenshotView) or the .screenshotFrame() modifier. These make sure the frame matches the ScreenshotFormat.