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)")
}
}
PreviewDevice lib:
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:
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")
}
}
}
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:
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:
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:
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. 👋
Top comments (1)
Do you like the library? Press the star on github.com/Toni77777/PreviewDevice Thanks