Sometimes you will have multiple variants of the same UI, for example a loading state, error state, larger font size, dark mode, etc... These variants are individual snapshots that a grouped together into a "Snapshot Group". Each platform has different ways of identifying the snapshots that are part of the same group. The name of the snapshot and the group it belongs to will uniquely identify a snapshot and is used to decide which images to compare in two uploads.

iOS

PreviewProvider

PreviewGroup

All snapshots that originate from the same preview provider are part of the same group. The name of the group is the name of the type conforming to PreviewProvider

Preview Name

The name of the snapshot is the display name of the preview, set with .previewDisplayName("My Preview"). If there is no display name, or multiple of the same display names within one preview provider, the index of the preview in the PreviewProver's list of previews is used instead.

Preview Macro (#Preview)

PreviewGroup

All preview macros in the same source file are grouped together. The name of the group is the path of the swift source file.

Preview Name

The name of the snapshot is the display name of the preview, set as part of the macro #Preview("My Preview") { ... }. If there is no display name, or multiple of the same display names within one source file, the line number of the preview macro is used instead.

🚧

Using display name

Important: It's highly recommended to set unique display names for your previews in order to ensure they are identified correctly from one upload to another.

Android

Preview Group

Every function that is annotated with @Preview creates a group, the name of the group is the name of your function

Preivew Name

Variants within a group are named based on the Preview annotations present on the composable. The following example shows 2 variants each in the same group

@Preview
@Preview(fontScale = 1.5f)
@Composable
fun MyComposablePreview() { ... }