Meet PreviewDevice 0.7.0

PreviewDevice - a library with elegant syntax for preview device in SwiftUI.

The first question that comes to mind is,

Why do I need to use the third-party library for SwiftUI preview ?

For answer this question will compare Apple API for preview with PreviewDevice library. Let’s look at real cases on projects.

Case:

Preview on device. Let’s say you want to see a preview in the iPhone SE 2 Generation (4.7 inch screen size) with preview device name.

Apple way:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
            .previewDisplayName("iPhone SE (2nd generation)")
    }
}

PreviewDevice lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphoneSE_2Gen)
    }
}

It is easy make mistake in iphone device name when use standard Apple way. Also you need to know and keep in your mind the correct iPhone name. PreviewDevice library provides a type-safe way for preview devices. The library has Device enum with all devices types: all iphones, all ipads, all apple watches, ipod, mac.

Result: Result

Case:

Make preview on some devices. As example:

Apple way:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
                .previewDisplayName("iPhone 8")
            
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 8 Plus"))
                .previewDisplayName("iPhone 8 Plus")
            
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
                .previewDisplayName("iPhone 12 Pro")
            
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
        }
    }
}

PreviewDevice lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevices(devices: [.iphone8, .iphone8Plus, .iphone12Pro, .iphone12])
    }
}

The library awesome managed this case! Single line solution 💪

Result:
Result2

Case:

Make preview on the device for light and night mode.

Apple way:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .preferredColorScheme(.light)

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .preferredColorScheme(.dark)
        }
    }
}

PreviewDevice lib:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphone12, colorSchemes: [.light, .dark])
    }
}

Single line solution from the library 💪 💪

Result:

Result3

Case:

Make preview on the device with different interface orientations (portrait, landscape left, landscape right).

Apple way:

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.portrait)

            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.landscapeLeft)
            
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
                .previewDisplayName("iPhone 12")
                .previewInterfaceOrientation(.landscapeRight)
        }
    }
}

PreviewDevice lib:

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphone12, orientations: [.portrait, .landscapeLeft, .landscapeRight])
     
    }
}

Result: Result4

One line code 💪 💪 💪

Installation library

Requearements Xcode13

CocoaPods

Specify next line in Podfile:

pod PreviewDevice

Swift Package Manager

Open Xcode, File -> Swift Packages -> Add Packages.. and paste library git url:

https://github.com/Toni77777/PreviewDevice.git

Summary

PreviewDevice is a type-safe syntax sugar for preview device on SwiftUI.

Do you have a cool idea for a preview? Welcome to contribute!

Thanks for reading! See you soon. 👋