Meet PreviewDevice 0.7.0
Tags: swift, ios, swiftui, xcode
Published: 2021-08-27 16:56:35

**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**:
```swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
            .previewDisplayName("iPhone SE (2nd generation)")
    }
}
```

**PreviewDevice lib**: 

```swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphoneSE_2Gen)
    }
}
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdxobakjgnu0bqv437fj.png)


### Case:
Make preview on some devices. As example:
- iPhone 8
- iPhone 8 Plus
- iPhone12 Pro
- iPhone 12

**Apple way**:
```swift
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**: 

```swift
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 :muscle:

Result:  
![Result2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ciz0rd74ur57c4u6u33m.png)

### Case:
Make preview on the device for light and night mode. 

**Apple way**:
```swift
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**: 

```swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice(device: .iphone12, colorSchemes: [.light, .dark])
    }
}
```
Single line solution from the library :muscle: :muscle:

Result:

![Result3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix0z0fobp0mlroebza8j.png)


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

**Apple way**:
```swift
@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**: 

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

Result:
![Result4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8688y8hn0v2gppioqlr.png)

One line code :muscle: :muscle: :muscle:

## Installation library

> *Requearements* *Xcode13*

### [CocoaPods](https://guides.cocoapods.org/using/using-cocoapods.html)
Specify next line in Podfile:

```ruby
pod PreviewDevice
```

### [Swift Package Manager](https://github.com/apple/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](https://github.com/Toni77777/PreviewDevice)!
Thanks for reading! See you soon. :wave: