Intro to Coordinator pattern with SwiftUI and UIKit
- Eric Palma
- Dec 13, 2024
- 5 min read
Updated: 6 days ago
When building complex user navigation flows, separating navigation logic from views is essential for scalable and maintainable code. Enter the Coordinator pattern —a design pattern dedicated to orchestrating navigation between a series of views and potentially other coordinators, ensuring a seamless user experience.
In this article we will see how the Coorindator pattern can be implemented using UIKit for navigation and SwiftUI for individual screens.
This is an introductory article to the Coordinator pattern using UIKit and SwiftUI, in our subsequent post we use the coordinator pattern to build a more advanced user flow, see: Building a multi-flow iOS app using the Coordinator pattern.
The Best of Both Worlds: UIKit and SwiftUI
While the Coordinator pattern can technically be implemented using SwiftUI, it’s important to acknowledge that SwiftUI navigation is still evolving. It currently lacks some of the flexibility and robustness that UIKit navigation offers. This can be problematic when working with established apps, or when you're app requires custom navigation that simply does not fit into the SwiftUI way of doing things.
Thanks to UIHostingController, we can embed SwiftUI views within UIKit’s navigation stack, allowing us to take full advantage of UIKit’s mature and customizable navigation APIs while still leveraging SwiftUI’s declarative and lightweight approach for building individual screens.
This harmonious integration not only enhances user navigation but also streamlines the development process, making it a truly win-win scenario for developers and users alike. Before exploring how the Coordinator pattern is implemented using UIKit and SwiftUI let's understand what it is to begin with.
How does the Coordinator pattern work?
Each coordinator object is in charge of a flow, in this instance, a flow refers to the set of screens that a user can move between in a particular order. A simple example would be a user sign-up flow: The user starts at a sign up screen, then they move to a welcome screen, then finally they move to the home screen.
Another common example is a list to detail flow: The user views a list of items, when they click on an item, they are navigated to a detail screen. The Coordinator pattern supports navigating back as well, so it supports taking the user from a detail screen back to the list screen.
In both of the above examples, the coordinator is in charge of moving the user through the screens, maintaining any necessary state or passing data between screens.
To learn more about data flow in SwiftUI apps, check out this post: Data Flow & Data Sharing using SwiftUI
Coordinators are not limited to only managing screens, they can also contain other coordinators that represent more user flows. For example, we could have a RootCoordinator that manages a RegistrationCoordinator and a ViewItemsCoordinator: when the user completes the user registration flow, they move to the view items flow.
In this case the RootCoordinator only manages transitions between user flows (registration and view items), while the child coordinators only worry about their own user flows and screens. This enforces separation of concerns by forcing each coordinator to only concern itself with it's own screens and flow.
Basic implementation of the coordinator pattern using UIKit and SwiftUI
We are now ready to walk through a simple example where we implement a home screen to detail screen flow. To start, we will define a Coordinator protocol which every coordinator object will conform to:
With the above protocol in place, we can now define our app's coordinator, AppCoordinator, which will be responsible for navigating users between the home screen and a detail screen. Below is the code for our AppCoordinator:
Join my newsletter for exclusive iOS dev insights, tips, and a 25% discount on all subscription plans!
Want to read more?
Subscribe to curiousalgorithm.com to keep reading this exclusive post.