Detect OS in SwiftUI

On this post I will be covering a very crucial subject in SwiftUI. How to detect the OS in SwiftUI and which particular is running that current time. SwiftUI 2.0 allows you to write software which can have an OS condition. Furthermore we can specify which piece of code it will be run on a certain OS whether that is iOS or MacOS. Now that SwiftUI has become Multiplatform, it is important to know how to detect the iOS. I will be creating a Navigation TabBar for iOS and a SideBar for MacOS which is most likely to want to create different navigation experiences for the above operating systems.

Detect OS in SwiftUI | overview

First step is to make it Multiplatform. You can create a Multiplatform app by choosing the Multiplatform.

Create a multiplatform app

After doing that it is possible to run your app in multiple devices.

Platforms to run your app

Create Shared Data

Make sure you click both iOS and macOS. of course this file is only being used for data I would choose a plain Swift file rather than a SwiftUI. Make the file and add the following data to iterate.

firstly, to write clean code and give the example of files that can be in both macOS and iOS we need to create a mock data that will be shared to every OS our app is running.

create a file being Detected on every OS in SwiftUI

struct MenuModel: Identifiable {
    var id = UUID()
    var icon: String
    var name: String
}
var Menu = [
    MenuModel(icon: "square.grid.2x2.fill", name: "Dashboard"),
    MenuModel(icon: "message.fill", name: "Messages"),
    MenuModel(icon: "bell.fill", name: "Notification"),
    MenuModel(icon: "heart.fill", name: "Favourites"),
    MenuModel(icon: "person.fill", name: "My Profile"),
]

iOS Navigation

Firstly as you can see, you have an array of folders. Within these folders you can add any file you want be in a shared mode, meaning that it can be shared in iOS and macOS respectively. Same philosophy with the iOS and macOS folder.

File System on Multiplatform

Add a Navigation for iOS

the following step is to create a file where it will be specified for iOS

the next step is choose the iOS and the type of file you want. Apparently, in this case is iOS and SwiftUI.

Create a file to be accessible only from iOS

As you can see you need to specify the group and the target which in this case of course is iOS, since we are making a navigation for iOS.

create a View variable.

var iphoneNavView: some View {
    TabView {
        ForEach(Menu) { m in
        Text(m.name)
            .tabItem {
                Image(systemName: m.icon)
                Text(m.name)
            }
        }
    }.navigationTitle("Menu")
}

Add a Navigation for macOS

To be able to have a different navigation for macOS you need to follow the same procedure as I have done with iOS. Obviously this time you need to choose the macOS option.

create the Navigation for macOS

first you need to create the file and added in the right OS target.

Create a SwiftUI file

Make sure it is in the right Group and Target.

Create a file to be accessible only from macOS

create the navigation view the same way you did with iOS

var NavigationMacOS: some View {
    NavigationView {
    List(Menu) { m in
        NavigationLink(
            destination: Text(m.name)) {
            Label(m.name, systemImage: m.icon)
        }
    }.listStyle(SidebarListStyle())
    }.navigationTitle("Menu")
}

How you can detect OS in SwiftUI

The bellow code is the backbone on how to detect OS in SwiftUI os() accepts two operating system macOS and iOS. You can use multiple chained if statements by using #elseif.

struct ContentView: View {
    var body: some View {
        #if os(iOS)
        iphoneNavView
        #else
        NavigationMacOS
        #endif
    }
}

The result on detection os in SwiftUI

After combing all the above code the result is different when we run the same code base on macOS or iOS.

macOS was Detected in SwiftUI

iOS was Detected in SwiftUI

You can find the code on my GitHub.