
Telegram has a [spoiler feature](https://telegram.org/blog/reactions-spoilers-translations#spoilers) that allows you to hide certain parts of your message that could reveal a spoiler. In this article, we will explore how to implement the feature in SwiftUI.

## Dive into source code

If you're interested in exploring Telegram's source code, you'll find that they use the `CAEmitterLayer` and `CAEmitterCell` classes from Core Animation to [implement the spoiler effect](https://github.com/TelegramMessenger/Telegram-iOS/blob/930d1fcc46e39830e6d590986a6a838c3ff49e27/submodules/InvisibleInkDustNode/Sources/InvisibleInkDustNode.swift#L97-L109). `CAEmitterLayer` is a powerful class that allows you to create particle effects like fire, smoke, or snow. In the case of the Telegram spoiler effect, `CAEmitterLayer` is used to generate a cloud of particles that obscure the spoiler text:

```swift
let emitter = CAEmitterCell()
emitter.contents = UIImage(bundleImageName: "Components/TextSpeckle")?.cgImage
emitter.contentsScale = 1.8
emitter.emissionRange = .pi * 2.0
emitter.lifetime = 1.0
emitter.scale = 0.5
emitter.velocityRange = 20.0
emitter.name = "dustCell"
emitter.alphaRange = 1.0
emitter.setValue("point", forKey: "particleType")
emitter.setValue(3.0, forKey: "mass")
emitter.setValue(2.0, forKey: "massRange")
```

We will reuse their configuration, but in final, we want to see something like this:

```swift
import SwiftUI

struct ContentView: View {

    @State var spoilerIsOn = true

    var body: some View {
        Text("Everything will be good")
            .font(.title)
            .spoiler(isOn: $spoilerIsOn)
    }
}
```

## CAEmitterLayer in SwiftUI

We can create a custom `UIView` subclass that's designed specifically to work with `CAEmitterLayer`:

```swift
final class EmitterView: UIView {

    override class var layerClass: AnyClass {
        CAEmitterLayer.self
    }

    override var layer: CAEmitterLayer {
        super.layer as! CAEmitterLayer
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.emitterPosition = .init(x: bounds.size.width / 2,
                                      y: bounds.size.height / 2)
        layer.emitterSize = bounds.size
    }
}
```

We override the `layerClass` property to specify that the layer for this view should be of type `CAEmitterLayer`. We also override the `layer` property to cast the `super.layer` as a `CAEmitterLayer`, which allows us to access the emitter layer's properties and methods more easily.

Pay attention to `layoutSubviews()` function. It's required to set position  and size for the emitter.

Next, we'll use `UIViewRepresentable` wrapper and add emitter cell configurations:

```swift
struct SpoilerView: UIViewRepresentable {

    var isOn: Bool

    func makeUIView(context: Context) -> EmitterView {
        let emitterView = EmitterView()

        let emitterCell = CAEmitterCell()
        emitterCell.contents = UIImage(named: "textSpeckle_Normal")?.cgImage
        emitterCell.color = UIColor.black.cgColor
        emitterCell.contentsScale = 1.8
        emitterCell.emissionRange = .pi * 2
        emitterCell.lifetime = 1
        emitterCell.scale = 0.5
        emitterCell.velocityRange = 20
        emitterCell.alphaRange = 1
        emitterCell.birthRate = 4000

        emitterView.layer.emitterShape = .rectangle
        emitterView.layer.emitterCells = [emitterCell]

        return emitterView
    }

    func updateUIView(_ uiView: EmitterView, context: Context) {
        if isOn {
            uiView.layer.beginTime = CACurrentMediaTime()
        }
        uiView.layer.birthRate = isOn ? 1 : 0
    }
}
```

The `isOn` property in `SpoilerView` is used to change visibility of the particle effect via `birthRate` property. `textSpeckle_Normal` image is reused from Telegram, it's a simple white dot, we can use any image for particles or generate it in runtime. And of course, we can move all constants to the properties as well, but we hardcode it to simplify the example.

## Modifiers and extensions

We implement a `SpoilerModifier` struct that adds a spoiler to any view. It takes a boolean value to toggle the visibility of the effect.

```swift
struct SpoilerModifier: ViewModifier {

    let isOn: Bool

    func body(content: Content) -> some View {
        content.overlay {
            SpoilerView(isOn: isOn)
        }
    }
}
```

We already can use it like a usual modifier:

```swift
import SwiftUI

struct ContentView: View {

    var body: some View {
        Text("Everything will be good")
            .font(.title)
            .opacity(0)
            .modifier(SpoilerModifier(isOn: true))
    }
}
```

Or we can expend `View` protocol and add some useful modifiers:


```swift
extension View {

    func spoiler(isOn: Binding<Bool>) -> some View {
        self
            // 1
            .opacity(isOn.wrappedValue ? 0 : 1)
            // 2
            .modifier(SpoilerModifier(isOn: isOn.wrappedValue))
            // 3
            .animation(.default, value: isOn.wrappedValue)
            // 4
            .onTapGesture {
                isOn.wrappedValue.toggle()
            }
    }
}
```

Let's discover every line here:

1. Hides the content if the spoiler is on.
2. Adds the modifier with the spoiler modifier.
3. Adds a default animation for smooth transitions between states. The type of the animation we also can pass via parameters to change it from the outside.
4. Add a tap gesture to change the states.

Now we can apply these modifiers to any view in our apps. It doesn't work exactly like in Telegram, because it should overlay every word separately and hide the particles starting from the tap area. According to `Text` interface in SwiftUI and initial tricky implementation (hello, private API), this solution is simple and useful for rectangles like one-line text or images. If you know how to improve it, feel free to ping me on [Twitter](https://twitter.com/iosartem).

If you want to play with SpoilerView by yourself, check out [SpoilerViewExample](https://github.com/artemnovichkov/SpoilerViewExample) project on Github.

## References

- [Telegram source code](https://github.com/TelegramMessenger/Telegram-iOS)
- [CAEmitter​Layer](https://nshipster.com/caemitterlayer) by [Mattt](https://twitter.com/mattt)
- [SwiftUI-Particles](https://github.com/ArthurGuibert/SwiftUI-Particles) by [ArthurGuibert](https://github.com/ArthurGuibert)
- [EffectsLibrary](https://github.com/GetStream/effects-library) by [Stream](https://twitter.com/getstream_io)

Recreation of spoiler feature from Telegram in SwiftUI

Implementing spoilers in SwiftUI

*Translations: [Russian](https://habr.com/ru/company/skyeng/blog/598295)*

Previously I wrote a post about [working with web view content offline](https://www.artemnovichkov.com/blog/swiftui-offline). Since then Apple team has released Xcode 13.2 beta with Swift 5.5, I've read a book about [modern concurrency model in Swift](https://www.raywenderlich.com/books/modern-concurrency-in-swift), and I guess it's a perfect time to update my examples with async/await!

Before reading this post I highly recommend checking [Concurrency](https://docs.swift.org/swift-book/LanguageGuide/Concurrency.html) article in Swift Language Guide.

> Note: Code examples are written in Swift 5.5 and tested on iOS 15.0 with Xcode 13.2 beta (13C5081f).

## Preparation

Let's brush up on the implementation of `WebDataManager` that allows us to get data for web content by URL:

```swift
import WebKit

final class WebDataManager: NSObject {
    
    enum DataError: Error {
        case noImageData
    }
    
    // 1
    enum DataType: String, CaseIterable {
        case snapshot = "Snapshot"
        case pdf = "PDF"
        case webArchive = "Web Archive"
    }
    
    // 2
    private var type: DataType = .webArchive
    
    // 3
    private lazy var webView: WKWebView = {
        let webView = WKWebView()
        webView.navigationDelegate = self
        return webView
    }()
    
    private var completionHandler: ((Result<Data, Error>) -> Void)?
    
    // 4
    func createData(url: URL, type: DataType, completionHandler: @escaping (Result<Data, Error>) -> Void) {
        self.type = type
        self.completionHandler = completionHandler
        webView.load(.init(url: url))
    }
}
```

Here we have:

1. A `DataType` enum for different data formats.
2. A `type` property with default value to avoid optional values.
3. A `webView` property for data loading.
4. A `createData` function for handling `dataType`, `completionHandler` and loading of web data for a passed url.

What is missing here? Of course, `WKNavigationDelegate` implementation:

```swift
extension WebDataManager: WKNavigationDelegate {
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        switch type {
        case .snapshot:
            let config = WKSnapshotConfiguration()
            config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
            webView.takeSnapshot(with: config) { [weak self] image, error in
                if let error = error {
                    self?.completionHandler?(.failure(error))
                    return
                }
                guard let pngData = image?.pngData() else {
                    self?.completionHandler?(.failure(DataError.noImageData))
                    return
                }
                self?.completionHandler?(.success(pngData))
            }
        case .pdf:
            let config = WKPDFConfiguration()
            config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
            webView.createPDF(configuration: config) { [weak self] result in
                self?.completionHandler?(result)
            }
        case .webArchive:
            webView.createWebArchiveData { [weak self] result in
                self?.completionHandler?(result)
            }
        }
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        completionHandler?(.failure(error))
    }
}
```

Here we have 6 calls of `completionHandler` and weak using of self to avoid retain cycles. Can we improve this code with async/awaits? Let's try it out!

## Adding asynchronous code

We start with refactoring `createData` function in async manner:

```swift
func createData(url: URL, type: DataType) async throws -> Data
```

Before working with web view content, we must be sure that the main frame navigation is completed. We can handle it in `webView(_:didFinish:)` function of `WKNavigationDelegate`. To make this logic async\await-compatible, we will use `withCheckedThrowingContinuation` function.

Let's write a function to load web content by URL asynchronously:

```swift
private var continuation: CheckedContinuation<Void, Error>?

private func load(_ url: URL) async throws {
    return try await withCheckedThrowingContinuation { continuation in
        self.continuation = continuation
        self.webView.load(.init(url: url))
    }
}
```

We store `continuation` to use it in delegate functions.  To handle navigation updates, we add `continuation` using:

```swift
extension WebDataManager: WKNavigationDelegate {
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        continuation?.resume(returning: ())
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        continuation?.resume(throwing: error)
    }
}
```

But if you try to run this code, you get an error:

> Call to main actor-isolated instance method 'load' in a synchronous nonisolated context

To fix it we add a `MainActor` attribute:

```swift
@MainActor
private func load(_ url: URL) async throws {
  // implementation
}
```

MainActor is a global actor that allows us to execute code on the main queue. All `UIView`s (therefore `WKWebView`) are declared with this attribute and accessed on the main queue.

Now we can call `load` function:

```swift
@MainActor
func createData(url: URL, type: DataType) async throws -> Data {
    try await load(url)
    // To be implemented
    return Data()
}
```

Because `load` function must be called in the main queue, we mark `createData` function with `MainActor` attribute as well. Even more, we can add this attribute to `WebDataManager` class instead all functions:

```swift
@MainActor 
final class WebDataManager: NSObject {
    // implementation
}
```

## Working with system async/await APIs

Now we're ready to rewrite creating web content data. Here's an old example of PDF generation:

```swift
let config = WKPDFConfiguration()
config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
webView.createPDF(configuration: config) { [weak self] result in
    self?.completionHandler?(result)
}
```

Luckily, Apple team has added async/await analogues for plenty of existing functions with callbacks: 

```swift
let config = WKPDFConfiguration()
config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
return try await webView.pdf(configuration: config)
```

It works for taking image snapshots as well, but web archive creation is still available only with completion handlers. Here's a good chance for another `withCheckedThrowingContinuation` function:

```swift
import WebKit

extension WKWebView {

    func webArchiveData() async throws -> Data {
        try await withCheckedThrowingContinuation { continuation in
            createWebArchiveData { result in
                continuation.resume(with: result)
            }
        }
    }
}
```

Pay attention the continuation can automatically handle the state of the given `Result` value and its associated values.

The final version of `createData` function looks better:

```swift
func createData(url: URL, type: DataType) async throws -> Data {
    try await load(url)
    switch type {
    case .snapshot:
        let config = WKSnapshotConfiguration()
        config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
        let image = try await webView.takeSnapshot(configuration: config)
        guard let pngData = image.pngData() else {
            throw DataError.noImageData
        }
        return pngData
    case .pdf:
        let config = WKPDFConfiguration()
        config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
        return try await webView.pdf(configuration: config)
    case .webArchive:
        return try await webView.webArchiveData()
    }
}
```

We have one place to handle all errors and reduce capturing self in closures.

## Using new async functions

Congratulations, we did it! Wait, but how to use new async functions from sync context? With instances of  `Task`  we can perform async tasks:

```swift
Task {
    do {
        let url = URL(string: "https://www.artemnovichkov.com")!
        let data = try await webDataManager.createData(url: url, type: .pdf)
        print(data)
    }
    catch {
        print(error)
    }
}
```

To get the final result, check [OfflineDataAsyncExample](https://github.com/artemnovichkov/OfflineDataAsyncExample) project on Github.

## Conclusion

At first glance, new concurrency model looks like syntax sugar. However, it leads to safe, more structured code. We can easily avoid closures with self capturing and improve error handling. I'm still playing async/awaits and collecting useful resources in [awesome-swift-async-await](https://github.com/artemnovichkov/awesome-swift-async-await) repo. Feel free to send a PR with your favorite learning materials related to this topic!


Using new concurrency model with SwiftUI apps

Async/await for existing iOS apps


*Translations: [Russian](https://habr.com/ru/company/skyeng/blog/585790)*

A common task making app layout is keyboard avoidance. Since iOS 14.0 it works automatically for SwiftUI views. What's about old, but good UIKit? Previously we used keyboard notifications, checked keyboard height, and updated related constraints. iOS 15 introduces a new layout guide — `UIKeyboardLayoutGuide`. It's super intuitive if you're familiar with other guides like `safeAreaLayoutGuide` and `readableContentGuide`. Let's try to use it in a simple example — we have a login screen with text fields and a login button pinned to the bottom.

## Base usage

We add just two constraints with system spacing:

```swift
view.addSubview(loginButton)
let buttonBottom = view.keyboardLayoutGuide.topAnchor.constraint(equalToSystemSpacingBelow: loginButton.bottomAnchor, multiplier: 1.0)
let buttonTrailing = view.keyboardLayoutGuide.trailingAnchor.constraint(equalToSystemSpacingAfter: loginButton.trailingAnchor, multiplier: 1.0)
NSLayoutConstraint.activate([buttonBottom, buttonTrailing])
```

Now `loginButton` layout follows keyboard changes. When the keyboard is offscreen, `keyboardLayoutGuide.topAnchor` matches the view's `safeAreaLayoutGuide.bottomAnchor`.

<Image
  alt={`Works as simple as it must be`}
  src={`/images/keyboard-layout-guide/button.png`}
  width={946}
  height={882}
/>

That's all, thank you for coming to my TED talk! Wait, the keyboard is no so simple, especially on iPadOS. You can undock and drag it to any place. Luckily, the keyboard guide helps us to handle these cases.

<Image
  alt={`Floating keyboard on iPadOS`}
  src={`/images/keyboard-layout-guide/floating-keyboard.png`}
  width={1276}
  height={1780}
/>

## Working with floating keyboards

At first, we must enable keyboard tracking, it's disabled by default:

```swift
view.keyboardLayoutGuide.followsUndockedKeyboard = true
```

Now, loginButton starts to follow the keyboard:

<Image
  src={`/images/keyboard-layout-guide/button-follow.png`}
  width={524}
  height={424}
/>

It works great, but here we have edge cases. When we move the keyboard at the top, `loginButton` may be outside of the view frame.

Actually, `UIKeyboardLayoutGuide` is a subclass of `UITrackingLayoutGuide`. It's a layout guide that automatically activates and deactivates constraints depending on its nearness to edges. To use it, we replace buttonTrailing constraint with:

```swift
let buttonTop = view.keyboardLayoutGuide.topAnchor.constraint(equalToSystemSpacingBelow: loginButton.bottomAnchor, multiplier: 1.0)
buttonTop.identifier = "buttonTop"
view.keyboardLayoutGuide.setConstraints([buttonTop], activeWhenAwayFrom: .top)
```

`buttonTop` constraint will be active only when the keyboard is away from the top. Finally, we add `buttonBottom` constraint to pin `loginButton` at the keyboard bottom:

```swift
let buttonBottom = loginButton.topAnchor.constraint(equalToSystemSpacingBelow: view.keyboardLayoutGuide.bottomAnchor, multiplier: 1.0)
buttonBottom.identifier = "buttonBottom"
view.keyboardLayoutGuide.setConstraints([buttonBottom], activeWhenNearEdge: .top)
```

> Note: configuring identifiers for NSLayoutConstraint allows you to find constraints easily during debugging.

Here is a final demo of our example. I've added some leading and trailing constraints as well. Check out [UIKeyboardLayoutGuideExample](https://github.com/artemnovichkov/UIKeyboardLayoutGuideExample) on Github.

<iframe
  width="100%"
  height="315"
  src="//www.youtube.com/embed/BznK97LhCv8"
  frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>

## Related resources

- [Use the floating keyboard on your iPad](https://support.apple.com/en-us/HT210758) by Apple
- [Your guide to keyboard layout](https://developer.apple.com/videos/play/wwdc2021/10259) by Apple
- [Adjust Your Layout with Keyboard Layout Guide](https://developer.apple.com/documentation/uikit/keyboards_and_input/adjust_your_layout_with_keyboard_layout_guide) by Apple
- [SwiftUI keyboard avoidance](https://fivestars.blog/articles/swiftui-keyboard) by [Federico Zanetello](https://twitter.com/zntfdr)


Working with new iOS 15 API for keyboard avoidance

Guide for UIKeyboardLayoutGuide


> Note: Examples are tested on iOS 15.0 with Xcode 13.0 beta (13A5154h).

iOS 15.0 beta gives us new SwiftUI views, and one of them is `AsyncImage`. It loads and displays an image from the given URL.

Let's start with a basic example:

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url)
    }
}
```
By default, it shows a gray background and replaces it with the loaded image:

<Image
  alt={`Empty and success states of AsyncImage`}
  src={`/images/async-image/empty-success.png`}
  width={946}
  height={882}
/>

Optionally we can change `scale` to use for the image. In the example below the image size will be reduced by half:

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url, scale: 2)
    }
}
```

To update the appearance of `AsyncImage`, we can use an initializer with content and placeholder view builders. Here we able to modify a final image and show a custom placeholder view:

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url) { image in
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        } placeholder: {
            Image(systemName: "photo")
                .imageScale(.large)
                .foregroundColor(.gray)
        }
        .ignoresSafeArea()
    }
}
```

<Image
  alt={`Custom placeholder and resized image`}
  src={`/images/async-image/custom-placeholder.png`}
  width={946}
  height={882}
/>

If we want to handle an error state, we can use another initializer with `AsyncImagePhase`. It's a simple enum with three cases: empty, success, and error.

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        AsyncImage(url: url, content: view)
    }

    @ViewBuilder
    private func view(for phase: AsyncImagePhase) -> some View {
        switch phase {
        case .empty:
            ProgressView()
        case .success(let image):
            image
                .resizable()
                .aspectRatio(contentMode: .fit)
        case .failure(let error):
            VStack(spacing: 16) {
                Image(systemName: "xmark.octagon.fill")
                    .foregroundColor(.red)
                Text(error.localizedDescription)
                    .multilineTextAlignment(.center)
            }
        @unknown default:
            Text("Unknown")
                .foregroundColor(.gray)
        }
    }
}
```

Here we show a spinner during loading, resized image if loading is successful, and an error message if something is wrong.

<Image
  alt={`Working with phases of AsyncImage`}
  src={`/images/async-image/phases.png`}
  width={1419}
  height={882}
/>

To specify animations between phase changes, we can optionally add `Transition`:

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")
    private let transaction: Transaction = .init(animation: .linear)

    var body: some View {
        AsyncImage(url: url,
                   transaction: transaction,
                   content: view)
    }
    ...
}
```

And, of course, we can use `AsyncImage` inside `List` to show multiple images:

```swift
import SwiftUI

struct ContentView: View {

    private let url = URL(string: "https://picsum.photos/200")

    var body: some View {
        List {
            ForEach(0..<10) { _ in
                AsyncImage(url: url,
                           content: view)
                    .listRowInsets(.init(.zero))
            }
        }
        .listStyle(.plain)
    }
    ...
}
```

<Image
  alt={`Finally, we can show List without separators `}
  src={`/images/async-image/list.png`}
  width={946}
  height={1764}
/>

If you want to play with AsyncImage by yourself, check out [AsyncImageExample](https://github.com/artemnovichkov/AsyncImageExample) project on Github.

## References

- [AsyncImage Documentation](https://developer.apple.com/documentation/SwiftUI/AsyncImage) by Apple
- [Transactions in SwiftUI](https://swiftwithmajid.com/2020/10/07/transactions-in-swiftui) by [Majid Jabrayilov](https://twitter.com/mecid)

Working with AsyncImage in iOS 15: placeholders, errors, success!

AsyncImage. Loading images in SwiftUI


Last year I bought [BEKANT](https://www.ikea.com/us/en/p/bekant-desk-sit-stand-white-s49022538/) desk. It looks minimalistic and... boring, so I wanted to add some RGB lightning. I chose a cheap no-name [RGB stripe](https://aliexpress.ru/item/32801604250.html) with a controller that works with IR and Bluetooth as well. The seller recommends using [HappyLighting](https://apps.apple.com/ru/app/id1145694075) app. It works well enough, supports default styles like pulsating and strobe effects, syncs with music and surround sound. But the interface is a bit strange:

<Image
  alt={`Bluetooth and SwiftUI`}
  src={`/images/bluetooth-and-swiftui/happy-lighting.png`}
  width={1170}
  height={2532}
/>

I'm an iOS developer who learns SwiftUI and Combine, so I decided to write my own app 🧑🏻‍💻. It's a proof of concept, but in the future, I can add more features like a watchOS companion app, Siri support, widgets, etc. At the end of the article, you can find a link to a Github repo with source code. Here is a final demo:

<iframe
  width="100%"
  height="315"
  src="//www.youtube.com/embed/qMGvnPOIhJM"
  frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>

## Bluetooth: Delegates -> Combine

With the power of `CoreBluetooth` framework, you can check Bluetooth state, scan for peripherals, discover required services and characteristics. By default, it works via Delegate pattern and knows nothing about `Combine`. If you aren't familiar with `CoreBluetooth`, I recommend checking [this tutorial](https://www.raywenderlich.com/231-core-bluetooth-tutorial-for-ios-heart-rate-monitor) by Ray Wendenlich team. The basic algorithm for reading and writing data is:

1. Find Bluetooth device a.k.a. peripheral.
2. Discover its services. Every service is a collection of data related to peripheral features. For instance, heart rate or lightning services.
3. Discover characteristics for specific services. Every characteristic provides information about the peripheral state. Also, you can write data for characteristics to update the peripheral states.

I wrote a simple `BluetoothManager` object that works with `CBCentralManager` and `CBPeripheral` and broadcasts any updates. I decided to use Combine for it. With the magic of publishers, I can subscribe to needed updates and filter/map them in a more declarative way.

Here is an example of working with states and peripherals:

```swift
import Combine
import CoreBluetooth

final class BluetoothManager: NSObject {
    
    private var centralManager: CBCentralManager!
    
    var stateSubject: PassthroughSubject<CBManagerState, Never> = .init()
    var peripheralSubject: PassthroughSubject<CBPeripheral, Never> = .init()
    
    func start() {
        centralManager = .init(delegate: self, queue: .main)
    }
    
    func connect(_ peripheral: CBPeripheral) {
        centralManager.stopScan()
        peripheral.delegate = self
        centralManager.connect(peripheral)
    }
}

extension BluetoothManager: CBCentralManagerDelegate {
    
    func centralManagerDidUpdateState(_ central: CBCentralManager) {
        stateSubject.send(central.state)
    }
    
    func centralManager(_ central: CBCentralManager, didDiscover peripheral: CBPeripheral, advertisementData: [String : Any], rssi RSSI: NSNumber) {
        peripheralSubject.send(peripheral)
    }
}
```

In the app views, I subscribe to required subjects and show related states. Here is an example of discovering services:

```swift
manager.servicesSubject
    .map { $0.filter { Constants.serviceUUIDs.contains($0.uuid) } }
    .sink { [weak self] services in
        services.forEach { service in
            self?.peripheral.discoverCharacteristics(nil, for: service)
        }
    }
    .store(in: &cancellables)
```

To work with specific devices, you must know identifiers for services and characteristics to read and write data. Unfortunately, my controller has no documentation about its protocol, but I found [an awesome description on Github](https://github.com/madhead/saberlight/blob/master/protocols/Triones/protocol.md). The author reverse-engineered the protocol and described almost all data formats. They look strange and have plenty of magic constants, but who don't use them in projects 😅. I added the required identifiers to the app based on the documentation used them for filtering: 

```swift
enum Constants {
    static let readServiceUUID: CBUUID = .init(string: "FFD0")
    static let writeServiceUUID: CBUUID = .init(string: "FFD5")
    static let serviceUUIDs: [CBUUID] = [readServiceUUID, writeServiceUUID]
    static let readCharacteristicUUID: CBUUID = .init(string: "FFD4")
    static let writeCharacteristicUUID: CBUUID = .init(string: "FFD9")
}
```

## SwiftUI: states and view models

For every view in the app I added view model to split layout and business logic. View models support `ObservableObject` protocol, work with `BluetoothManager`, manage subject subscriptions, and have `@Published` for view updates. The downside of this approach is no convenient way to pass `BluetoothManager` to every model. Initially, I wanted to use `@EnvironmentObject` and pass it to all child views, but it works well only in `View` itself. Finally, I just added it lazily to all view models:

```swift
import SwiftUI
import CoreBluetooth
import Combine

final class DevicesViewModel: ObservableObject {
    
    @Published var state: CBManagerState = .unknown
    @Published var peripherals: [CBPeripheral] = []
    
    private lazy var manager: BluetoothManager = .shared
    private lazy var cancellables: Set<AnyCancellable> = .init()
    
    deinit {
        cancellables.cancel()
    }
    
    func start() {
        manager.stateSubject
            .sink { [weak self] state in
                self?.state = state
            }
            .store(in: &cancellables)
        manager.peripheralSubject
            .filter { [weak self] in self?.peripherals.contains($0) == false }
            .sink { [weak self] in self?.peripherals.append($0) }
            .store(in: &cancellables)
        manager.start()
    }
}
```

Views create their own model and handle it with `@StateObject`:

```swift
struct DevicesView: View {
    
    @StateObject private var viewModel: DevicesViewModel = .init()
}
```

[Ping me](http://twitter.com/iosartem) if you're good in SwiftUI dependency injection topic, I really appreciate feedback for this logic.

Debugging the app, I found that `onAppear` called twice for some views. People on forums confirm it and fill radars. In the app, I just added a silly check with a state flag:

```swift
struct DeviceView: View {
    
    @State private var didAppear = false
    
    var body: some View {
        content()
            .onAppear {
                guard didAppear == false else {
                    return
                }
                didAppear = true
                viewModel.connect()
            }
    }
}
```

I didn't want to reinvent the color wheel and used `ColorPicker` for color selection:

```swift
ColorPicker("Change stripe color",
            selection: $viewModel.state.color,
            supportsOpacity: false)
```

I used it in UIKit projects a few times, you can just show it on any user action. But in SwiftUI it shows a default interface with no customization.

<Image
  alt={`Bluetooth and SwiftUI`}
  src={`/images/bluetooth-and-swiftui/color-stripe.png`}
  width={1170}
  height={2532}
/>

There are two options for selection binding — `Color` and `CGColor`. I choose the second one because it is easy to get color components from it.

## Conclusion

The more I use SwiftUI, the more I like its concepts. In pair with Combine, it makes app logic more expressive. And I'm still sure that developing pet projects are a great way to combine fun and learning.

The final project is [available on Github](https://github.com/artemnovichkov/ColorStripe). Feel free to check it and share your feedback. Thanks for reading!

## Related resources

- [Transferring Data Between Bluetooth Low Energy Devices](https://developer.apple.com/documentation/corebluetooth/transferring_data_between_bluetooth_low_energy_devices) by Apple
- [SwiftUI Property Wrappers](https://swiftuipropertywrappers.com) by [Donny Wals](https://twitter.com/donnywals)
- [SwiftUI Color Picker](https://youtu.be/Kp9sHwp4wN8) by [Sean Allen](https://twitter.com/seanallen_dev)


Dev journey about working with Bluetooth, SwiftUI, and Combine

Bluetooth and SwiftUI. Developing app for RGB stripe control


Two months ago my friend [@iamnalimov](https://twitter.com/iamnalimov) and I published jstnmbr app on [ProductHunt](https://www.producthunt.com/posts/jstnmbr). The idea of the app is very simple — count everything: books, push-ups, glasses of water. Of course, I choose SwiftUI for implementation. In this article, I want to highlight the key moments of implementing custom popups. It won't be in the tutorial format, we'll add a specific layout, but I hope it helps you in using overlays, geometry readers, and modifiers in your projects. If you have any questions or ideas on how to improve it, ping me on [Twitter](http://twitter.com/iosartem).

## Design is the key

Let's start with the design. Popups may contain different content, but the appearance and behavior are the same. Superviews are covered with blur overlay, popups have the same background color, top left and right rounded corners, and ability to dismissing:

<Image
  alt={`Final design`}
  src={`/images/custom-popups-in-swiftui/design.png`}
  width={414}
  height={896}
/>

We want to implement a familiar API interface for presenting like alerts or action sheets:

```swift
.popup(isPresented: $isPresented) {
    popupView
}
```

Here we have a `Binding<Bool>` for presenting state and `@ViewBuilder` for popup content. Internally it will contain two parts:

- Custom ViewModifier that will show popups via overlays.
- View extension for convenience interface and blur overlays.

## Modifiers And View Extensions

Initially, we create `OverlayModifier`:

```swift
import SwiftUI

struct OverlayModifier<OverlayView: View>: ViewModifier {
    
    @Binding var isPresented: Bool
    @ViewBuilder var overlayView: () -> OverlayView
    
    init(isPresented: Binding<Bool>, @ViewBuilder overlayView: @escaping () -> OverlayView) {
        self._isPresented = isPresented
        self.overlayView = overlayView
    }
}
```

It contains `isPresented` state and the popup content. To conform `ViewModifier` protocol, we must implement `body(content:)` function. In our case it just optionally adds an overlay based on the state:

```swift
func body(content: Content) -> some View {
    content.overlay(isPresented ? overlayView() : nil)
}
```

Pay attention to `overlayView()`. Its body will be called only when popups is presented. `View` knows nothing about this modifier, so we extend `View` protocol with popup presentation:

```swift
extension View {
    
    func popup<OverlayView: View>(isPresented: Binding<Bool>,
                                  blurRadius: CGFloat = 3,
                                  blurAnimation: Animation? = .linear,
                                  @ViewBuilder overlayView: @escaping () -> OverlayView) -> some View {
        blur(radius: isPresented.wrappedValue ? blurRadius : 0)
            .animation(blurAnimation)
            .allowsHitTesting(!isPresented.wrappedValue)
            .modifier(OverlayModifier(isPresented: isPresented, overlayView: overlayView))
    }
}
```

Let's describe every modifier:

1. `blur` adds a blur overlay to superview if the popup is presented. We have a default value in function parameters to reuse the same radius and modify for specific popups if needed.
2. `animation` adds an animation for blur overlay if needed.
3. `allowsHitTesting` disables user interactions in superview if the popup is presented.
4. `modifier` applies custom `OverlayModifier` with passed `overlayView`.

We're ready to show popups, but we don't have any yet 😅. Let's make a basic PopupView with a common appearance according to our goals:
- It may contain different content inside;
- It has a background color and rounded top left and top right corners;
- It is showed from the bottom with animation.

## Popup Layout

Let's create a simple view named NamePopupView that knows nothing about popup logic:

<Image
  alt={`NamePopupView`}
  src={`/images/custom-popups-in-swiftui/popup-1.png`}
  width={1044}
  height={650}
/>

The app may show different popups, so we create a reusable `BottomPopupView` to show different content:

```swift
struct BottomPopupView<Content: View>: View {
    
    @ViewBuilder var content: () -> Content
    
    var body: some View {
        content()
    }
}
```

Now we can show it in `.popup` modifier:

```swift
.popup(isPresented: $isPresented) {
	BottomPopupView {
		NamePopupView(isPresented: $isPresented)
	}
}
```

By default, overlays are shown in the center of the superview. To pin it to the bottom we wrap the content into `VStack` with `Spacer`:

```swift
VStack {
	Spacer()
	content()
	    .background(Color.white)
	    .cornerRadius(radius: 16, corners: [.topLeft, .topRight])
}
```

Default `cornerRadius` modifier works for all corners, so here we use a custom modifier for it:

```swift
struct RoundedCornersShape: Shape {
    
    let radius: CGFloat
    let corners: UIRectCorner
    
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    
    func cornerRadius(radius: CGFloat, corners: UIRectCorner = .allCorners) -> some View {
        clipShape(RoundedCornersShape(radius: radius, corners: corners))
    }
}
```

All is now ready, and here is the result:

<Image
  alt={`Popup with extra Safe Area insets`}
  src={`/images/custom-popups-in-swiftui/popup-2.png`}
  width={946}
  height={1764}
/>

Insets for Safe Area have added automatically, but we want to overlay superviews at the bottom too. To read and use Safe Area insets, we add `GeometryReader`:

```swift
GeometryReader { geometry in
	VStack {
	    Spacer()
	    content()
		    .padding(.bottom, geometry.safeAreaInsets.bottom)
		    .background(Color.white)
		    .cornerRadius(radius: 16, corners: [.topLeft, .topRight])
	}
	.edgesIgnoringSafeArea([.bottom])
}
```

To pin our popup at the bottom, we add `.edgesIgnoringSafeArea` modifier. According to the content, we add a bottom padding with the bottom inset before `.background` modifier. With this logic background color will appear as expected.

<Image
  alt={`Popup with ignoring Safe Area insets`}
  src={`/images/custom-popups-in-swiftui/popup-3.png`}
  width={946}
  height={1764}
/>

Since iOS 14 we even have an automatic keyboard avoidance:

<Image
  alt={`Popup with keyboard avoidance`}
  src={`/images/custom-popups-in-swiftui/popup-4.png`}
  width={946}
  height={1764}
/>

## Animations

The layout is finished 🥳, but there is no animation. Luckily SwiftUI has easy-to-use modifiers for animations and transitions:

```swift
GeometryReader { geometry in
    ...
}
.animation(.easeOut)
.transition(.move(edge: .bottom))
```

<Image
  alt={`Popup with extra Safe Area insets`}
  src={`/images/custom-popups-in-swiftui/final.gif`}
  width={600}
  height={1298}
/>

## Source Code

You can find the final project on [Github](https://github.com/artemnovichkov/CustomPopupExample). Thanks for reading!

## Related Articles

- [Custom Popup in SwiftUI](https://www.vadimbulavin.com/swiftui-popup-sheet-popover) by [Vadim Bulavin](https://twitter.com/V8tr)
- [How to use GeometryReader without breaking SwiftUI layout](https://swiftwithmajid.com/2020/11/04/how-to-use-geometryreader-without-breaking-swiftui-layout) by [Majid Jabrayilov](https://twitter.com/mecid)
- [SwiftUI keyboard avoidance](https://www.fivestars.blog/articles/swiftui-keyboard) by [Federico Zanetello](https://twitter.com/zntfdr)

How to make custom popups with reusable showing in SwiftUI

Implementing custom popups in SwiftUI


One of the key features of SwiftUI is a declarative syntax for layout. It is available thanks to `result builders`, previously called function builders. With result builders, we can implicitly build up a final value from a sequence of components. The final revision of this feature is released in Swift 5.4, and Xcode 12.5 suggests code completions and fix-its for it. I guess it's a good sign for exploring it and making action sheets more declarative!

## Preparation

We'll create a simple SwiftUI app, where we can select ingredients for sandwich.

```swift
struct ContentView: View {
    
    @State private var ingredients: [String] = []
    @State private var isActionSheetPresented = false
    
    var body: some View {
        VStack {
            Text(ingredients.joined())
                .font(.system(.title))
            Button("Make a sandwich") {
                isActionSheetPresented = true
            }
        }
        .padding()
        .actionSheet(isPresented: $isActionSheetPresented) {
            let buttons = [ActionSheet.Button.default(Text("🍞")) {
                ingredients.append("🍞")
            },
            ActionSheet.Button.cancel()]
            return ActionSheet(title: Text("Select an ingredient"), message: nil, buttons: buttons)
        }
    }
}
```

When we tap on the button, `ActionSheet` is presented with buttons from the array in the initializer. The syntax for action buttons, especially with defined actions, looks a bit complicated. Let's improve it with a custom result builder.

<Image
  alt={`Initial preview`}
  src={`/images/result-builders/initial-preview.png`}
  width={946}
  height={1764}
/>

## Basics

We create a `ButtonsBuilder` struct with `@resultBuilder` attribute. To start using it, we must implement at least one static `buildBlock` function:

```swift
@resultBuilder
struct ButtonsBuilder {

    static func buildBlock(_ components: ActionSheet.Button...) -> [ActionSheet.Button] {
        components
    }
}
```

Here we have a variadic parameter with `ActionSheet.Button` and just return it as is.

Because `ActionSheet` knows nothing about our builder, we create a new initializer with title, message, and the builder:

```swift
extension ActionSheet {
    
    init(title: Text, message: Text? = nil, @ButtonsBuilder buttons: () -> [ActionSheet.Button]) {
        self.init(title: title, message: message, buttons: buttons())
    }
}
```

Now we're ready to refactor `ActionSheet` configuration:

```swift
.actionSheet(isPresented: $isActionSheetPresented) {
    ActionSheet(title: Text("Select an ingredient"), message: nil) {
        ActionSheet.Button.default(Text("🍞")) {
            ingredients.append("🍞")
        }
        ActionSheet.Button.cancel()
    }
}
```
Looks great!

## What if?.. Working with conditions

Result builders may build a partial result depending on some conditions. In our app, we add a new `State` and `Toggle`. If it is enabled, we add cucumbers and tomatoes otherwise. 

```swift
// In States section
@State private var likeCucumbers = true

// Below Text in ContentView
Toggle("I love cucumbers", isOn: $likeCucumbers)
```

To support `if-else` conditions in our builder, we must implement `buildEither(first:)` and `buildEither(second:)` functions:

```swift
@resultBuilder
struct ButtonsBuilder {
    
    ...
    
    static func buildEither(first components: [ActionSheet.Button]) -> [ActionSheet.Button] {
        components
    }
    
    static func buildEither(second components: [ActionSheet.Button]) -> [ActionSheet.Button] {
        components
    }
}
```

If we try to add `if-else` statement like this:

```swift
if likeCucumbers {
	ActionSheet.Button.default(Text("🥒")) {
		ingredients.append("🥒")
	}
}
else {
	ActionSheet.Button.default(Text("🍅")) {
		ingredients.append("🍅")
	}
}
```

We have an error:

> Cannot pass array of type '[ActionSheet.Button]' (aka 'Array\<Alert.Button\>') as variadic arguments of type 'ActionSheet.Button' (aka 'Alert.Button')

We can solve the error by defining a new protocol and implementing it by both a single `ActionSheet.Button` and a collection of `ButtonsConvertible`:

```swift
protocol ButtonsConvertible {
    
    var buttons: [ActionSheet.Button] { get }
}

extension ActionSheet.Button: ButtonsConvertible {
    
    var buttons: [ActionSheet.Button] {
        [self]
    }
}

extension Array: ButtonsConvertible where Element == ButtonsConvertible {

    var buttons: [ActionSheet.Button] { self.flatMap(\.buttons) }
}
```

In `ButtonsBuilder` we replace all `ActionSheet.Button` with `ButtonsConvertible`. And finally, we implement `buildFinalResult` function that gets all `ButtonsConvertible` and maps it to buttons:

```swift
@resultBuilder
struct ButtonsBuilder {
    
    static func buildBlock(_ components: ButtonsConvertible...) -> [ButtonsConvertible] {
        components
    }
    
    ...
    
    static func buildFinalResult(_ components: [ButtonsConvertible]) -> [ActionSheet.Button] {
        components.flatMap(\.buttons)
    }
}
```

Now `likeCucumbers` check builds successfully.

## Using ForEach for Actions

SwiftUI has an awesome `ForEach` element. It gets different data collections and converts them to views via `@ViewBuilder`. I was wondering if there is any chance to use it for buttons 🤔. Of course, let's start with an extension:

```swift
extension ForEach: ButtonsConvertible where Content == ActionSheet.Button {

    var buttons: [ActionSheet.Button] {
        data.map(content)
    }
}
```

Here we declare that `Content` generic must be `ActionSheet.Button` and map data to buttons via `content` closure.

`ActionSheet.Button` is a simple typealias for `Alert.Button`, and `Alert.Button` is just a struct that doesn't conform `View` protocol. To solve it, we implement it and return `Never` for the body:

```swift
extension ActionSheet.Button: View {

    public var body: Never {
        fatalError()
    }
}
```

Because we don't use `ForEach` for rendering, the body will never be called. And it works now!

```swift
ForEach(["🧅", "🧄"], id: \.self) { string in
	ActionSheet.Button.default(Text(string)) {
		ingredients.append(string)
	}
}
```

We can explicitly add ids like in the example, use `Identifiable` array or even ranges inside `ForEach`. The downside of this trick is that we can accidentally use `ActionSheet.Button` inside any body and get `fatalError` in runtime.

## Conclusion

Result builder is a great enhancement in Swift language. In certain cases, it improves code readability dramatically. If you want to play with the example, check [ResultBuilderExample](https://github.com/artemnovichkov/ResultBuilderExample) repo.

Thanks for reading 🙏

## References

- [Official documentation](https://docs.swift.org/swift-book/ReferenceManual/Attributes.html#ID633) by Apple
- [Result builders in Swift explained with code examples](https://www.avanderlee.com/swift/result-builders/) by [Antoine v.d. SwiftLee](https://twitter.com/twannl)
- [awesome-function-builders](https://github.com/carson-katri/awesome-function-builders) by community


Make SwiftUI sheets more declarative with result builders

Using result builders for action sheets in SwiftUI


🏆 Featured in [iOS Dev Weekly - Issue 505](https://iosdevweekly.com/issues/505)

I continue developing an app for saving and reading articles. In my [previous post](https://artemnovichkov.com/blog/sheet-happens), I covered interesting cases of using sheets in SwiftUI. Now I want to describe my journey with offline mode.

There are situations when users are unable to download web content: bad connection, airplane mode, etc. `WKWebView` has useful APIs for saving its content in different formats. Let's check it out!

> Note: Examples are written in Swift 5.4 and tested on iOS 14.5 with Xcode 12.5 (12E262).

## Preparation

In the app user can save URL content without explicit previewing. To deal with it, we use a simple `WKWebView` wrapper called `WebDataManager`:

```swift
import WebKit

final class WebDataManager: NSObject {
    
    private lazy var webView: WKWebView = {
        let webView = WKWebView()
        webView.navigationDelegate = self
        return webView
    }()
    
    private var completionHandler: ((Result<Data, Error>) -> Void)?
    
    func createData(url: URL, completionHandler: @escaping (Result<Data, Error>) -> Void) {
        self.completionHandler = completionHandler
        webView.load(.init(url: url))
    }
}
```

We create a web view without frame, because we don't want to show it. Also, `WebDataManager` has a convenience function with completion to handle web content. For all formats it will return Data that we can store locally.

To work with web navigation, we must conform `WKNavigationDelegate` and implement `didFinish` and `didFail` functions:

```swift
extension WebDataManager: WKNavigationDelegate {
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        
// save loaded content

    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        completionHandler?(.failure(error))
    }
}
```

These functions will be called on navigation changes. Now we are ready to save the content, and our first station will be `takeSnapshot`.

## Snapshots

Since iOS 11.0 `WKWebView` has `takeSnapshot` function. It has an optional WKSnapshotConfiguration to specify a capture behavior. In the final, it returns a generated image.

```swift
// declared in WebDataManager

enum DataError: Error {
    case noImageData
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    let config = WKSnapshotConfiguration()
    webView.takeSnapshot(with: config) { [weak self] image, error in
        if let error = error {
            self?.completionHandler?(.failure(error))
            return
        }
        guard let pngData = image?.pngData() else {
            self?.completionHandler?(.failure(DataError.noImageData))
            return
        }
        self?.completionHandler?(.success(pngData))
    }
}
```

Remember zero frame of the web view? Because of it, we have an unknown error here:

> Error Domain=WKErrorDomain Code=1 "An unknown error occurred" UserInfo={NSLocalizedDescription=An unknown error occurred}

<Image
  alt={`Initial preview`}
  src={`https://media.giphy.com/media/S5n7Wkhhw5A2IrfKER/giphy.gif`}
  width={480}
  height={198}
/>

To fix it, we can get a `contentSize` and set it to config's rect:

```swift
config.rect = .init(origin: .zero, size: webView.scrollView.contentSize)
```

Now we have the image data, can save it locally and show in the app:

```swift
import SwiftUI

struct SnapshotContentView: View {
    
    let url: URL
    
    var body: some View {
        if let image = UIImage(contentsOfFile: url.path) {
            ScrollView {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            }
        }
        else {
            Text("Fail to load image")
        }
    }
}
```

Let's highlight a few cons of this approach:

- Images have fixed sizes and may look bad on different screens;
- We can't copy text from contents and open URLs.

Luckily, the next approach has no these issues.

## PDF

With iOS 14.0 `WKWebView` got a new `createPDF` function. It already returns a `Result` object that we can just pass to our `completionHandler`:

```swift
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.createPDF { [weak self] result in
        self?.completionHandler?(result)
    }
}
```

For a record, the function also takes `WKPDFConfiguration` object with the only option — a rect to capture a portion of the web view.

SwiftUI has no views for PDF content. But with helping of `UIViewRepresentable` we can use `PDFView` from `PDFKit` framework:

```swift
import SwiftUI
import PDFKit

struct PDFContentView: UIViewRepresentable {
    
    let url: URL
    
    func makeUIView(context: Context) -> PDFView {
        let view = PDFView()
        view.autoScales = true
        view.document = PDFDocument(url: url)
        return view
    }
    
    func updateUIView(_ pdfView: PDFView, context: Context) {
    }
}
```

Now we can copy text and even open URLs in Safari, but web content is still static. For instance, animations are gone, drop-down lists will be collapsed forever.

## Web archive

The last approach in this article is web archives. A web archive is a file that archives inside it all the content of one web page. And since iOS 14.0 we can work with it easily:

```swift
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.createWebArchiveData { [weak self] result in
        self?.completionHandler?(result)
    }
}
```

Of course, we have another wrapper, but for `WKWebView`:

```swift
import SwiftUI
import WebKit

struct WebArchiveContentView: UIViewRepresentable {
    
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        WKWebView()
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        webView.loadFileURL(url, allowingReadAccessTo: url)
    }
}
```

With the magic of web archives web page logic is working as well. With an internet connection, the web view will navigate to tapped content links.

## Conclusion

Finally, for the app I choose web archives, but all approaches are helpful based on app purposes. The last thing I want to add is a size of rendered contents. For my blog's main page the sizes are:

- .png — 1,8 Mb;
- .pdf — 2,3 Mb;
- .webarchive — 5,3 Mb.

I don't mind it (yet 😅), but I'm planning to add features for clearing saved data and download archives for selected articles.

If you want to play with examples and test your URLs, an example project with all three saving options is available [here](https://github.com/artemnovichkov/OfflineDataExample).

<Image
  alt={`Example preview`}
  src={`/images/swiftui-offline/example-preview.png`}
  width={946}
  height={1764}
/>


Three out-of-box ways to show web content offline. Of course, with SwiftUI examples

Working with web content offline in SwiftUI apps


Developing pet projects is one of the best ways to learn new things. Since SwiftUI 1.0 I've been writing an app for saving and reading articles. I rewrote it twice from scratch, added and removed features based on my user experience, used new APIs, etc.

I had a few interesting cases implementing modal views a.k.a. sheets in SwiftUI. The main goal of this article is to summarize my experience and use it as a reference for the future. I simplify code examples to focus on specific logic. Let's start with showing.

> Note: Examples are written in Swift 5.3.2 and work on iOS 14.0 with Xcode 12.4 (12D4e).

## Showing sheets

There are two options for showing sheets. 

The first one is based on `Binding<Bool>` value. It can be stored via `@State` property wrapper and good for sheets that need no external data:

```swift
struct ArticlesView: View {

    @State var isSettingsViewPresented = false
    
    var body: some View {
        Button("Show Settings") {
            isSettingsViewPresented = true
        }
        .sheet(isPresented: $isSettingsViewPresented) {
            SettingsView()
        }
    }
}

struct SettingsView: View {

    var body: some View {
        Text("Settings")
    }
}
```

The second one is based on `Binding<Item?>` value where the item is an optional Identifiable object. it's a good choice if we want to pass any data to sheets. For instance, a selected article for reading. Pay attention that the selected article is not optional in sheet content closure:

```swift
// A simple struct with article data

struct Article: Identifiable {

    let id: UUID
    let title: String
}

struct ArticlesView: View {

    @State var article: Article?
    
    var body: some View {
        Button("Show Article") {
            article = .init(id: .init(), title: "Awesome article")
        }
        .sheet(item: $article) { article in
            ArticleDetailsView(article: article)
        }
    }
}

// A view for article showing

struct ArticleDetailsView: View {

    @State var article: Article
    
    var body: some View {
        Text(article.title)
    }
}
```

Interesting moments here:

- if `id` of the selected article will be changed, the presented sheet will be dismissed and replaced with a new sheet;
- if the selected article becomes nil at any moment, the sheet will be dismissed as well. 

For both showing options we can optionally add `onDismiss` closure that executed when the sheet dismisses:

```swift
struct ArticlesView: View {

    @State var article: Article?
    
    var body: some View {
        Button("Show Article") {
            article = .init(id: .init(), title: "Awesome article")
        }
        .sheet(item: $article, onDismiss: onDismiss) { article in
            ArticleDetailsView(article: article)
        }
    }
       
    private func onDismiss() {
        print("dismisses")
    }
}
```

By default, we can dismiss sheets via swipe gestures. But what if we want to dismiss sheets based on another user action or app logic?

## Dismissing sheets

There are two options to dismiss sheets too. If we use `Binding<Bool>`, we can pass it to a sheet via `@Binding` property wrapper and update its value. Bindings allow to change values in parent views:

```swift
// in ArticlesView

.sheet(isPresented: $isSettingsViewPresented) {
    SettingsView(isSettingsViewPresented: $isSettingsViewPresented)
}

struct SettingsView: View {
    
    @Binding var isSettingsViewPresented: Bool
    
    var body: some View {
        ZStack {
            Text("Settings")
            VStack {
                Spacer()
                Button("Dismiss") {
                    isSettingsViewPresented = false
                }
            }
        }
    }
}
```

Another option is more universal and based on `presentationMode` environment:

```swift
struct SettingsView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        ZStack {
            Text("Settings")
            VStack {
                Spacer()
                Button("Dismiss") {
                    presentationMode.wrappedValue.dismiss()
                }
            }
        }
    }
}
```

This environment indicates whether a view is currently presented by another view.

## Sheets and ForEach

The app with only one article is a bit useless, so let's create List and make articles rows via `ForEach`:

```swift
struct ArticlesView: View {

    let articles: [Article] = [.init(id: .init(), title: "Awesome article"),
                               .init(id: .init(), title: "Another awesome article")]
    @State var isArticleDetailsViewPresented: Bool = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach(articles) { article in
                    Text(article.title)
                        .onTapGesture {
                            isArticleDetailsViewPresented = true
                        }
                        .sheet(isPresented: $isArticleDetailsViewPresented) {
                            ArticleDetailsView(article: article)
                        }
                }
            }
            .navigationTitle("Articles")
        }
    }
}
```

Here we use `Binding<Bool>` for sheet state and update its value on tap action. Because we have the articles in enumeration, we can pass it to `ArticleDetailsView`. Everything looks fine, the app builds successfully. But `ArticleDetailsView` presents only with `"Awesome article"` title for the first article. Ok, remember this case and try to update sheets logic in the next article section after another example.

## Multiple sheets

Previously we used one sheet for the selected article. In my app, I show different views according to the internet connection. If the internet is available, I show `SafariView` with the url of the selected article, and WebArchiveView with saved web archive data.

At first, we update our models:

```swift
struct Article: Identifiable {

    let id: UUID
    let title: String
    let url: URL
}

extension URL: Identifiable {
    
    public var id: String {
        absoluteString
    }
}

extension String: Identifiable {
    
    public var id: String {
        self
    }
}
```

URL and String types must conform `Identifiable` protocol for using in sheet bindings.

Next, we update ArticlesView with multiple sheets. To simplify the example let's show different views based on Bool state:

```swift
struct ArticlesView: View {

    let article: Article = .init(id: .init(),
                                 title: "Sheet happens",
                                 url: URL(string: "https://artemnovichkov.com/blog/sheet-happens")!)
    
    @State var url: URL?
    @State var title: String?
    @State var isOn = true
    
    var body: some View {
        HStack {
            Button("Show Article") {
                if isOn {
                    url = article.url
                }
                else {
                    title = article.title
                }
            }
            .sheet(item: $url) { url in
                SafariView(url: url)
            }
            .sheet(item: $title) { title in
                WebArchiveView(title: title)
            }
            Toggle("", isOn: $isOn)
        }
        .padding()
    }
}
```

Finally, we add views with different states and body content:

```swift
struct SafariView: View {
    
    @State var url: URL
    
    var body: some View {
        Text("Content of " + url.absoluteString)
    }
}

struct WebArchiveView: View {
    
    @State var title: String
    
    var body: some View {
        Text("Web archive data of \(title) article")
    }
}
```

Here we have another strange behavior — only `WebArchiveView` will be shown. It's a known issue in SwiftUI, but don't give up, let's fix it!

## Fixing multiple sheets

We create `Sheet` enum with cases for every sheet. It must conform `Identifiable` as well:

```swift
enum Sheet: Identifiable {
    
    case url(URL)
    case webArchive(String)
    
    var id: String {
        switch self {
        case .url(let url):
            return url.id
        case .webArchive(let title):
            return title.id
        }
    }
}
```

In `ArticlesView` we replace states with only one with `Sheet` value and use one `sheet` modifier:

```swift
struct ArticlesView: View {

    let article: Article = .init(id: .init(),
                                 title: "Sheet happens",
                                 url: URL(string: "https://artemnovichkov.com/blog/sheet-happens")!)
    
    @State var sheet: Sheet?
    @State var isOn = true
    
    var body: some View {
        HStack {
            Button("Show Article") {
                if isOn {
                    sheet = .url(article.url)
                }
                else {
                    sheet = .webArchive(article.title)
                }
            }
            .sheet(item: $sheet) { sheet in
                switch sheet {
                case .url(let url):
                    SafariView(url: url)
                case .webArchive(let title):
                    WebArchiveView(title: title)
                }
            }
            Toggle("", isOn: $isOn)
        }
        .padding()
    }
}
```

Now, with sheet state, both views will be presented 🎉

If we want to reuse these sheets in another view, we can conform `View` protocol and return related views in body:

```swift
enum Sheet: View, Identifiable {
    
    case url(URL)
    case webArchive(String)
    
    var id: String {
        switch self {
        case .url(let url):
            return url.id
        case .webArchive(let title):
            return title.id
        }
    }
    
    var body: some View {
        switch self {
        case .url(let url):
            SafariView(url: url)
        case .webArchive(let title):
            WebArchiveView(title: title)
        }
    }
}

// in ArticlesView

.sheet(item: $sheet) { $0 }
```

The final code for the example is available [here](https://github.com/artemnovichkov/sheet).

## Updates for iOS & iPadOS 14.5 Beta 3

According to [release notes](https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-14_5-beta-release-notes), we can now apply multiple `sheet(isPresented:onDismiss:content:)` and `fullScreenCover(item:onDismiss:content:)` modifiers in the same view hierarchy. (74246633). But if we need to support previous versions (oh, come on, of course we need 😀), we can use the way described above.

## Conclusion

As we can see, SwiftUI has a simple and declarative way for showing sheets with bindings magic. But in real apps with different layouts we must use it wisely and know edge cases of its behavior. Feel free to ping on Twitter, ask your questions related to this article, highlight grammar mistakes , or share your cases. Thanks for reading!


My experience with sheets in SwiftUI based on developing pet projects

Sheet happens. Working with modal views in SwiftUI


You all see these [beautiful](https://twitter.com/mecid/status/1359468427396714504) [code](https://twitter.com/twannl/status/1359823904609603584) [screenshots](https://twitter.com/mkj_is/status/1361204092320632836) on Twitter. I often use [Carbon](https://carbon.now.sh) for my tweets, but Raycast team released ray.so that looks prettier and has options for customization via query parameters. I decided to write an Xcode Source Extension for it. Here is my journey, enjoy the reading!

## The app is first

Extensions can be installed only within main apps, and it's a good chance to use SwiftUI for macOS development. My app contains options for sharing: colors, background, dark mode, and paddings. Finally, the app looks like this:

<Image
  alt={`RaySo extension preview`}
  src={`/images/developing-xcode-extensions-tips-and-tricks/rayso-preview.png`}
  width={1224}
  height={760}
/>

All selected options are saved to UserDefaults and shared to the extension via app groups. The app is based on SwiftUI App template, and it is very limited for configuration. For instance, it is very hard to disable the fullscreen toolbar button. 

Since macOS 11.0 SDK you can use [defaultAppStorage(_:)](https://developer.apple.com/documentation/swiftui/scene/defaultappstorage(_:)) for scenes and views in your apps. All nested @AppStorage property wrappers will use it by default. In theory. But it doesn't work for me, so I set all stores explicitly:

```swift
private static let defaults = UserDefaults(suiteName: Constants.suiteName)!

@AppStorage(Constants.darkModeKey, store: Self.defaults)
var darkMode: Bool = true
```

And there is no way to check which store is used in @AppStorage. If you know how to fix it, ping me on [Twitter](http://twitter.com/iosartem).

## Continue with extension

It was my first Xcode Source Extension, so I dived into documentation and [open source extensions](https://github.com/theswiftdev/awesome-xcode-extensions). Personally, I think it's hard to develop and debug. By the way, here is my final code for getting a selected code:

```swift
private func selectedCode(from buffer: XCSourceTextBuffer) -> String {
var text = ""
var spacesCount = 0
for case let range as XCSourceTextRange in buffer.selections {
    for lineNumber in range.start.line...range.end.line {
        if lineNumber >= buffer.lines.count {
            continue
        }
        guard let line = buffer.lines[lineNumber] as? String else {
            continue
        }
        if spacesCount == 0 {
            let currentSpacesCount = line.prefix(while: { $0 == " " }).count
            if currentSpacesCount > 0 {
                spacesCount = currentSpacesCount
            }
        }
        let substring = line.dropFirst(spacesCount)
        text.append(String(substring))
    }
    return text.trimmingCharacters(in: .whitespacesAndNewlines)
}
```

Except extension-specific logic like spacing and trimming, you should work with `XCSourceTextBuffer`, `XCSourceTextRange`, `XCSourceTextPosition` etc.

When you run your extension, Xcode launches a special instance of Xcode. Sometimes extensions just not show up in Editor menu. Folks on StackOverflow, Apple Forums and Github issues advise to sign extensions with a real certificate, rename Xcode and of course clean/relaunch your projects. Erica Sadun wrote [a good article](https://ericasadun.com/2016/07/21/explorations-into-the-xcode-source-editor-extensions-underbelly-part-1) about debugging.

Finally, when the extension gets selected code, it opens special URL with saved options via `NSWorkspace.shared.open`.

To use any installed extensions, select Editor menu in Xcode, and all extensions with commands will appear at the bottom:

<Image
  alt={`RaySo extension using`}
  src={`/images/developing-xcode-extensions-tips-and-tricks/extension-using.png`}
  width={2071}
  height={1585}
/>

## Bonus: Key bindings

To be more productive, you can associate a keyboard shortcut with the extension command in `Xcode > Preferences... > Key Bindings` menu. I use ⌃ + ⌥ + ⌘ + R, because it doesn't conflict with default bindings.

## Results

To check the final project, you can open [RaySo](https://github.com/artemnovichkov/RaySo) repository and install the app. Regardless all caveats, I'm happy with the result. Now it's so easy to share my code right from Xcode! I just want to add several good articles that help me:

- [Xcode Source Editor Extension Tutorial: Getting Started](https://www.vadimbulavin.com/xcode-source-editor-extension-tutorial) by [Vadim Bulavin](https://twitter.com/V8tr)
- [Xcode​Kit and Xcode Source Editor Extensions](https://nshipster.com/xcode-source-extensions) by [Zoë Smith](https://twitter.com/zoejessica)

Xcode Extension for ray.so code sharing service

Developing Xcode Extensions. Tips and tricks


SwiftUI has a lot of modern and useful features. One of my favourite is @Environment property wrapper. It allows you to get system-wide settings, for instance, current locale or color scheme. Since iOS 14.0 you can use `openURL` value to open URLs from apps easily.

```swift
@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
extension EnvironmentValues {

/// Opens a URL using the appropriate system service.

    public var openURL: OpenURLAction { get }
}
```

With just a one line of code you can extend behaviour of you views:

```swift
import SwiftUI

struct ContentView: View {

    @Environment(\.openURL) var openURL
    
    var body: some View {
        Button("Share") {
            openURL(URL(string: "https://www.artemnovichkov.com")!)
        }
    }
}
```

I was wondering how it works under the hood and tried to implement the same trick for sharing activity items with `UIActivityViewController`. Let's check the result!

## Keys and values

At first we should create a custom key, conform to `EnvironmentKey` protocol and set a default value. It will be an empty struct for now:

```swift
struct ShareAction {}

struct ShareActionEnvironmentKey: EnvironmentKey {

    static let defaultValue: ShareAction = .init()
}
```

Next, we should extend `EnvironmentValues` to make `ourShareAction` be available from the environment:

```swift
extension EnvironmentValues {

    var share: ShareAction {
        self[ShareActionEnvironmentKey]
    }
}
```

The last thing is adding `callAsFunction` in `ShareAction` struct to use the same syntax:

```swift
struct ShareAction {

    func callAsFunction(_ activityItems: [Any]) {
        let vc = UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
        UIApplication.shared.windows.first?.rootViewController?.present(vc, animated: true, completion: nil)
    }
}
```

> Unfortunately, there is no SwiftUI-way to open this controller. If you use a better way, let me know!

To read more about callable values of user-defined nominal types, check [SE-0253](https://github.com/apple/swift-evolution/blob/master/proposals/0253-callable.md) proposal on Github.

That's it, now we can use `.share` value and share activities from any view:

```swift
import SwiftUI

struct ContentView: View {

    @Environment(\.share) var share
    
    var body: some View {
        Button("Share") {
            share([URL(string: "https://www.artemnovichkov.com")!])
        }
    }
}
```

## Related Resources

The final code is available [here](https://github.com/artemnovichkov/ShareEnvironmentExample), and there is a list of related articles:

- [Environment Documentation](https://developer.apple.com/documentation/swiftui/environment)
- [What is @Environment in SwiftUI](https://sarunw.com/posts/what-is-environment-in-swiftui) by [Sarun W.](https://twitter.com/sarunw)
- [The power of Environment in SwiftUI](https://swiftwithmajid.com/2019/08/21/the-power-of-environment-in-swiftui) by [Majid Jabrayilov](https://twitter.com/mecid)
- [How to use @EnvironmentObject to share data between views](https://www.hackingwithswift.com/quick-start/swiftui/how-to-use-environmentobject-to-share-data-between-views) by [Paul Hudson](https://twitter.com/twostraws)


Artem Novichkov