How to add UIKit component on your SwiftUI project

fabriciomasiero

Fabrício Masiero

Posted on May 6, 2020

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.

Creating Project on Xcode

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

Initial State
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()
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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!) {

    }
}
Enter fullscreen mode Exit fullscreen mode

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()
    }
}
Enter fullscreen mode Exit fullscreen mode

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"))
    }
}
Enter fullscreen mode Exit fullscreen mode

Yes, is simple like that!

You can download the source code here

I hope you enjoyed.
Bye bye =D

💖 💪 🙅 🚩
fabriciomasiero
Fabrício Masiero

Posted on May 6, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related