DEV Community

Cover image for Meet PreviewDevice 0.7.0
Anton Paliakou
Anton Paliakou

Posted on

Meet PreviewDevice 0.7.0

#swift #ios #swiftui #xcode

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. 👋

Top comments (1)

Collapse
 
toni777772 profile image
Anton Paliakou • • Edited

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