Creating Multiplatform Apps with SwiftUI

SwiftUI makes it easy to take some or all of the code written for one Apple platform and use it to create an app for another platform in the Apple ecosystem. For example, in this chapter, we will create an iOS app and then reuse some components to create a macOS and a watchOS app.

When using multiplatform development in SwiftUI, we share common resources among platforms while creating other resources that are platform-specific. For example, models may be shared across platforms, but certain images, views, and controls are platform-specific. Creating platform-specific views allows us to follow best practices and design guidelines, which reach a broader audience and provide a user experience tailored to the platform.

Since the introduction of Xcode 14 in June 2022, Apple has provided a multiplatform target in Xcode. When you create a new iOS app using Xcode 14 or Xcode 15, the multiplatform target is used by default. The multiplatform...

Technical requirements

The code in this chapter is based on Xcode 15.0 and iOS 17.0. You can download and install the latest version of Xcode from the App Store. You’ll also need to be running macOS Sonoma (14.0) or newer since we will be using the latest SwiftUI APIs on the Mac.

Simply search for Xcode in the App Store and select and download the latest version. Launch Xcode and follow any additional installation instructions that your system may prompt you with. Once Xcode has fully launched, you’re ready to go.

All the code examples for this chapter can be found on GitHub at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Chapter16-Multiplatform-SwiftUI.

Creating an iOS app in SwiftUI

Before going for multiplatform app development, we will create an iOS app. We will be starting with the app created during our work on the Using mock data for previews recipe in Chapter 4, Viewing while Building with SwiftUI Preview in Xcode 15. The version created for this recipe will be more modular to allow for code reuse across platforms, and the resources will not be stored in the preview section of the app.

The app will display a list of insects, you can tap on any insect in the list to see more details about it. The data regarding the insects will be read from a JSON file and made available to our views using an @Environment variable.

Getting ready

Let’s create a new iOS app in SwiftUI named Multiplatform. Make sure to select the iOS App template and not the Multiplatform template for this recipe.

Important Note:

The multiplatform template provided with Xcode creates an iOS app with a multiplatform target that...

Creating the macOS version of the app with a new target

Our iOS app showed a list of insects in one view and details regarding the selected insect in a separate view, because of the limited amount of space available on the iPhone screen. However, a Mac screen has a larger amount of screen space; therefore, we can display the list of insects on the left side of the screen and the details regarding the selected insect on the right side.

In this recipe, we will create a new target for our macOS app and share code and resources between the two targets, iOS and macOS. This approach is best suited if one of the following applies:

• Your app has a considerably different user interface between the Mac and the iPhone.
• Your app has a large legacy code base in UIKit and AppKit.
• You have two separate apps and want to share code and resources between them.
• You need to support versions of iOS older than iOS 16 and you can’t use the new multiplatform views...

Creating a multiplatform version of the app sharing the same target

When you create a new app using Xcode 15, a multiplatform target is used by default. The multiplatform target allows us to share a single target for iOS, iPadOS, macOS, visionOS, and tvOS, while the watchOS app remains in a separate target.

SwiftUI is in its fifth iteration and Apple is making a big push to use SwiftUI as the preferred framework for multiplatform apps. Many SwiftUI views behave differently depending on the platform used to run the app. SwiftUI takes care of the configuration automatically, while also providing configuration options to further refine the platform-specific behavior.

This recipe shows how to create an app for iOS, iPadOS, and macOS, and best practices when targeting multiplatform apps in SwiftUI.

Getting ready

Download the chapter materials from GitHub:

https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Chapter16-Multiplatform-SwiftUI/03-Create...

Creating the watchOS version of the iOS app

In the previous recipes, we created an iOS app that works on the iPhone, the iPad, and Macs with Apple Silicon, and a native macOS version of that app. Now, finally, we’ll create the watchOS version of the app. Even with the multiplatform target we used in the previous recipe, the watchOS app needs a separate target.

When creating apps for watchOS, we need to keep in mind that the screen is small, we have limited gestures to interact with the UI, and watchOS provides specific UI widgets available to us. We need to make appropriate design choices based on these constraints. The good news is that with WatchOS 10, SwiftUI takes care of the heavy lifting for us.

In this recipe, we will create the watchOS version of our insect app.

Getting ready

The watchOS simulator is not installed with Xcode by default. To install the watchOS 10 simulator, launch Xcode and go to the Settings menu. In the modal window, choose the Platforms...