FlowCoordinator – Augmented Code

Recently I was asked a question about creating an app which has SwiftUI views but no navigation logic in it. Instead, UIKit controls how views are presented. It is a fair question since SwiftUI views have navigation support, but not everything is there if we need to support previous iOS versions as well, or we have a case of an app which have both UIKit and SwiftUI views. Therefore, let’s take a look at on one approach, how to handle navigation on the UIKit side but still use SwiftUI views.

UIHostingController presenting SwiftUI view

SwiftUI views are presented in UIKit views with UIHostingController which just takes in the SwiftUI view. UIHostingController is a UIViewController subclass, therefore it can be used like any other view controller in the view hierarchy. For getting things started, let’s configure SceneDelegate to use an object named FlowCoordinator which will handle navigation logic and then ask it to present a simple SwiftUI view.

	final class SceneDelegate: UIResponder, UIWindowSceneDelegate {
	var window: UIWindow?
	private lazy var flowController = FlowCoordinator(window: window!)

	func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
	guard let windowScene = scene as? UIWindowScene else { return }
	window = UIWindow(windowScene: windowScene)
	flowController.showRootView()
	window?.makeKeyAndVisible()
	}
	}

	final class FlowCoordinator {
	private let window: UIWindow

	init(window: UIWindow) {
	self.window = window
	}

	func showRootView() {
	let swiftUIView = ContentView()
	let hostingView = UIHostingController(rootView: swiftUIView)
	window.rootViewController = UINavigationController(rootViewController: hostingView)
	}
	}

	struct ContentView: View {
	var body: some View {
	VStack {
	Text("Hello, World!")
	}.frame(maxWidth: .infinity, maxHeight: .infinity)
	.background(.green)
	}
	}

view raw FlowCoordinator.swift hosted with ❤ by GitHub

A simple iOS app showing a green view which is rendered with SwiftUI but presented with UIKit — A simple app showing a green view which is rendered with SwiftUI but presented with UIKit.

Inserting the FlowCoordinator into SwiftUI view

The next step is that we want to allow SwiftUI view to control what is presented on the screen. For example, let’s add a button to the SwiftUI view which should present a sheet with another SwiftUI view. The button action needs to be able to talk to the flow coordinator, which controls what is presented on the screen. One way to insert the FlowCoordinator into SwiftUI environment is by conforming to ObservableObject and using the environmentObject() view modifier. Alternative is using EnvironmentValues and defining a key. For more information please check Injecting dependencies using environment values and keys in SwiftUI.

	final class FlowCoordinator: ObservableObject {}

	let swiftUIView = ContentView()
	.environmentObject(self) // self is FlowCoordinator

	struct ContentView: View {
	@EnvironmentObject var flowController: FlowCoordinator

	var body: some View {
	VStack(spacing: 8) {
	Text("Root view")
	Button("Present Sheet", action: flowController.showDetailView)
	…

view raw FlowCoordinator.swift hosted with ❤ by GitHub

Presenting a sheet

The sheet presentation code goes into the FlowCoordinator and as an example we show a DetailView which has a button for dismissing itself. Yet again, SwiftUI view just passes the handling to the FlowCoordinator.

	final class FlowCoordinator: ObservableObject {
	// …
	func showDetailView() {
	let detailView = DetailView()
	.environmentObject(self)
	let viewController = UIHostingController(rootView: detailView)
	window.rootViewController?.present(viewController, animated: true, completion: nil)
	}

	func closeDetailView() {
	// Needs to be more sophisticated later when there are more views
	window.rootViewController?.presentedViewController?.dismiss(animated: true, completion: nil)
	}
	}

	struct DetailView: View {
	@EnvironmentObject var flowController: FlowCoordinator

	var body: some View {
	VStack(spacing: 8) {
	Text("Detail view content")
	Button("Dismiss", action: flowController.closeDetailView)
	}.frame(maxWidth: .infinity, maxHeight: .infinity)
	.background(.orange)
	}
	}

view raw FlowCoordinator.swift hosted with ❤ by GitHub

A simple iOS app showing an orange sheet which is rendered with SwiftUI but presented with UIKit — A simple app showing an orange sheet which is rendered with SwiftUI but presented with UIKit.

Summary

We created a simple sample app which uses UIKit navigation logic but renders views with SwiftUI views. This kind of setup could be useful for apps which mix UIKit and SwiftUI. But I believe that even in case of that we could still use SwiftUI navigation in sub-flows but could keep using this approach for handling root view navigation.