DEV Community

Cover image for Meet PreviewDevice 0.7.0
Anton Paliakou
Anton Paliakou

Posted on

2 1

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 an 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)")
    }
}
Enter fullscreen mode Exit fullscreen mode

PreviewDevice lib:

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

It is easy make mistakes 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:

  • iPhone 8
  • iPhone 8 Plus
  • iPhone12 Pro
  • iPhone 12

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")
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

PreviewDevice lib:

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

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

PreviewDevice lib:

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

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

PreviewDevice lib:

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

    }
}
Enter fullscreen mode Exit fullscreen mode

Result:
Result4

One line code πŸ’ͺ πŸ’ͺ πŸ’ͺ

Installation library

Requearements Xcode13

CocoaPods

Specify next line in Podfile:

pod PreviewDevice
Enter fullscreen mode Exit fullscreen mode

Swift Package Manager

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

https://github.com/Toni77777/PreviewDevice.git
Enter fullscreen mode Exit fullscreen mode

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. πŸ‘‹

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (1)

Collapse
 
toni777772 profile image
Anton Paliakou β€’ β€’ Edited

Do you like the library? Press the star on github.com/Toni77777/PreviewDevice Thanks

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more