Integrating SwiftUI with UIKit and Developing Xcode Previews for UIKit’s ViewController

For beginners, I recommend you to read this article which explains the basics of SwiftUI and these articles which shows how to work with SwiftUI.

In this article, we are going to develop a simple project explaining

Let’s get started by creating a new project in Xcode 11

Storyboard Designing — UIKit’s ViewControllers

Design an UITableViewController to populate the TableView with Title naming them as HomeViewController in swift file
Add NavigationController to HomeViewController by doing Editor -> Embed -> NavigationController
Design a Detail page which has UIImageView named PictureViewController

Populating UITableView using Static Image URLs

I have provided static array contains URLs of pictures.
Used UITableView’s numberOfRowsInSection function to generate rows
Used UITableView’s cellForRowAt function to assign URL string to textLabel of UITableView Cells

Xcode Preview For HomeViewController

The HomeViewRepresentable is our wrapper and converts our UIView to a SwiftUI View.
Inside the makeUIView method we basically instantiate our view controller. This method can be used to instantiate any view, also a custom view or a view controller created from code.
We end with the HomeViewController_Preview implementing the PreviewProvider protocol.
We need to return the instance of HomeViewRepresentable to make this work.
@available code check if the version that we mentioned is enabled and then it executes preview code

ScreenShot — Xcode Preview Of UIKit’s View

Picture View Contoller using UIKit’s View

I have already set outlet for UIImageView from PictureViewController in Storyboard
Now we need to Assign image to UIImage by fetching image data from URL. To Fetch image data from URL, I have used the extension to load data from URL

UIImageView Extension-To Load Image Data From URL

To see the Xcode Preview for PictureViewController, We need to set the Storyboard Identifier of ViewController we desire in makeUIView of the UIViewRepresentable wrapper

Refer the below code to get a Xcode preview for PictureViewController

Xcode Preview For PictureViewController

To create a SwiftUI view, Choose File > New > File to open the template selector again. In the User Interface section, click to select SwiftUI View and click Next.

PictureView — Using SwiftUI

We have created a simple SwiftUI view which receives image URL and String when view is called.
We have used separate View named ImageViewContainer to load and assign an Image from URL

ImageViewContainer.swift — Load and Assign Image from URL

For beginners, I have highly recommended checking How to load an image from Remote URL in SwiftUI this article.
I have explained in detailed about what is ObservableObject and many concepts

Xcode Preview For SwiftUI Views

We just need to mention SwiftUI Views name and Image URL in the preview and it will show the preview of the Picture.

ScreenShot — Xcode Preview for SwiftUI Views

Integrating UIKit and SwiftUI

In HomeViewController, after populating a List of Image URLs, we need to add a new UITableView method didSelectRowAt which it will navigate to PictureViewController(UIKit) or PictureView(SwiftUI) based on the version of the iOS.
Apple provides very basic UIViewController subclass for hosting SwiftUI, UIHostingController for UIKit
You simply init UIHostingController with SwiftUI's view.

let pictureView = PictureView(imageURL: pictures[indexPath.row], receivedString: "SwiftUI") let hostVC = UIHostingController(rootView: pictureView)

Then use it just like normal UIViewController.

SwiftUI has no concept of UIViewController, everything is just a View. For SwiftUI to work as UIViewController you just set it as a rootView of UIHostingController
If iOS Version is below 13, then it will navigate to UIKit’s View and load image in that ViewController
If iOS Version is above or equal to 13.0, then it will navigate to SwiftUI’sview and load image

Find the detailed ScreenShots and project code in this Github link. You can refer to it in case you have any queries.
The Project is Updated for Xcode 11+ and Swift 5.0