How to add UIKit component on your SwiftUI project

A brief to how to add WKWebView on your SwiftUI view
First of all, there is no WebView component write in SwiftUI, so, how I add this component?

Yes, we need to add an UIKit component to a SwiftUI view 🤔
Ok, let's build a simple app in SwiftUI.

Xcode auto-generate a Hello World project, it's awesome, because it pretty easy to add WebView now!

Ok, finally lets work on some code

We need to create a ViewModel to treat the webview statement.

import Foundation
import WebKit

public class WebViewViewModel: NSObject {

    private let stringUrl: String
    public let webView: WKWebView

    init(stringUrl: String) {
        self.stringUrl = stringUrl
        self.webView = WKWebView()
    }
}

We create a ViewModel called WebViewViewModel with url and webview initializers. But, why?

url — is a string URL to you web site e.g google.com

webview — is a WKWebView object to store and control your component

and after this we need to perform a webview request to load the website, so add this on your ViewModel

public func request() {
    guard let url = URL(string: stringUrl) else {
        return
    }
    let urlRequest = URLRequest(url: url)
    webView.load(urlRequest)
    if webView.navigationDelegate == nil {
        webView.navigationDelegate = self
    }
}

And last but not least add WKNavigationDelegate to your ViewModel

extension WebViewViewModel: WKNavigationDelegate {
    public func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

    }
    public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    }
}

Our ViewModel is completed! Now we need to add this webview on our SwiftUI view, back to ContentView class and add this UIViewRepresentable

struct WebView: UIViewRepresentable {

    let viewModel: WebViewViewModel

    func makeUIView(context: Context) -> WKWebView {
        return viewModel.webView
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        viewModel.request()
    }
}

But… Whats is UIViewRepresentable? Basically is a instance to create and menage UIKit components, you can read more here and here.

Let's understand what that code does.

The function makeUIView is responsable to return your component.

The function updateUIView is responsable to tells your app state change.

Finally, the last thing we need to do is add our webview to our main view, like this:

struct ContentView: View {
    var body: some View {
        WebView(viewModel: WebViewViewModel(stringUrl: "https://tinyurl.com/w498z2l"))
    }
}

Yes, is simple like that!

You can download the source code here

I hope you enjoyed.
Bye bye =D