How to Use an SDK Built for UIKit in Your SwiftUI App

cardoso

Matheus Cardoso

Posted on November 11, 2020

How to Use an SDK Built for UIKit in Your SwiftUI App

SwiftUI becomes more popular as it gets more capable with each iOS release. However, it may take some time until it's a better option than UIKit to build complex user experiences such as chat and video calls. That doesn't mean you need to stick with UIKit until all the SDKs you use support SwiftUI. In this tutorial, you'll learn how easy it is to use SDKs built for UIKit in your SwiftUI app.

Image shows a chat screen running inside a SwiftUI app

In this tutorial, I'll use Stream Chat's iOS SDK inside a SwiftUI app. It provides a fully-featured chat user interface in the form of a UIViewController subclass. If you're using a different SDK, the process may be similar if it provides the UI components in the form of UIKit views or view controllers.

Configuring the SDK

Typically, in UIKit, we would put any SDK initialization code inside the AppDelegate's method applicationDidFinishLaunching(_:).

If you chose to go full SwiftUI and used the SwiftUI App lifecycle, which doesn't contain an AppDelegate, the best place to configure the SDK is inside the App struct's initializer:

Wrapping a UIViewController in SwiftUI

To display the ChatViewController provided by the Stream Chat SDK, we need to wrap it in a SwiftUI view struct. To do this, create a struct that conforms to the protocol UIViewControllerRepresentable and inside the makeUIViewController function, instantiate and configure the view controller as you would in a UIKit app. Additionally, you can add properties to the SwiftUI view, as I did below with channelType and channelId.

Displaying the UIViewController

Now, you can use the SwiftUI view you created as you would any other SwiftUI view. In this case, I added it as the root view in my app's ContentView. If you added any properties to your wrapper, you need to pass them now.

Wrapping a UIView in SwiftUI

In some cases, you may want to use a single UIView. The process is similar to wrapping a UIViewController. To do it, create a struct that conforms to UIViewRepresentable and inside the makeUIView function, instantiate and configure the view as you would in a UIKit app. In this case, I'm wrapping Stream Chat's AvatarView. I also added the name property to make it customize it inside the SwiftUI view hierarchy.

Displaying the UIView

Displaying the wrapped UIView is also similar to displaying the wrapped UIViewController. Just reference it as you would any other SwiftUI view. If you also added properties, make sure to fill them out.

Next Steps with UIKit on SwiftUI

Congratulations! You now have the entire library of SDKs built for UIKit at your SwiftUI app's disposal. If you want to check out two great examples of SDKs built for UIKit that you can use in your SwiftUI apps, see Stream Chat's iOS SDK and Dolby.io's Audio and Video SDK.

💖 💪 🙅 🚩
cardoso
Matheus Cardoso

Posted on November 11, 2020

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

Sign up to receive the latest update from our blog.

Related