Preview of SwitftUI View used in multiple targets

Question

Created Dec ’20

Replies 6

Boosts 0

Views 4.3k

Participants 6

I have a relatively simple SwiftUI component that is a member of both my iOS App target as well as the corresponding WatchKit Extension.

As long as I select either

the App scheme and select only the App target, or
the Watch scheme and select only the WatchKitExtension target

the preview works just fine.

As soon as I include the View in both targets, the preview fails with

The run destination iPhone 12 Pro Max is not valid for Running the scheme 'Trallala WatchKit App'.

or

The run destination Apple Watch Series 6 - 44mm is not valid for Running the scheme 'MultiTimer'.
respectively.

I get that the creation of the preview depends on the current target, but why does including it in additional targets create this error, and of course more important:

How to address that?

Additional question: Is there a way to create previews for both target platforms side by side?

Thanks a million

Klaus

Boost

Answer 1

BrianZhang OP

Dec ’20

I found the same issue when testing with SwiftUI tutorial - creating a watchos/macos app.
I can't get away with the error

The run destination iPhone 12 Pro Max is not valid for Running the scheme 'WatchLandmarks'.

anyway even when only WatchKitExtension is selected as the target.

It only happens to the watchos scheme, but not the macos scheme. This seems to be a defect of XCode Previews.

1

Answer 2

steve_mcc OP

Jan ’21

I was getting this error as well. (The run destination iPhone 12 Pro Max is not valid...)

What resolved it was going into the Simulator setup window and deleting the paired watches from all the iOS simulators I was not using (such as iPhone 12 Pro Max).

1

Answer 3

nasce OP

Jan ’21

Exactly the same steps and situation for me as BrianZhang.

0

Answer 4

MDeuschl OP

Jan ’21

I tried to remove all Watches from the iPhone Simulators. Doesn't work.
I can run the Project in iOS Simulator and Watch Simulator just fine. I can run the Project on iOS and WatchOS Devices just fine.

Previewing iOS and WatchOS side by side in the same preview canvas would really be a nice addition.

0

Answer 5

MDeuschl OP

Jan ’21

I have a workaround: pinned preview.

Tested with a sample custom view in shared group:

Code Block struct CustomTextView: View {
    let caption: String
    let foreground: Color
    var body: some View {
        VStack {
            Text(caption)
                .padding()
            Text("Colored\r" + caption)
                .foregroundColor(foreground)
                .padding()
        }
    }
}
//struct CustomTextView_Previews: PreviewProvider {
//    static var previews: some View {
//        CustomTextView(caption: "Shared Preview", foreground: .blue)
//    }
//}

And a preview container inside the WatchkitExtension:

Code Block struct CustomTextViewWatchPreview: View {
    var body: some View {
        CustomTextView(caption: "Watch Preview Wrapper", foreground: .red)
    }
}
struct CustomTextViewWatchPreview_Previews: PreviewProvider {
    static var previews: some View {
        CustomTextViewWatchPreview()
    }
}

Then when previewing Watch just pin this preview and modify the CustomTextView. The (iOS) Preview inside the CustomTextView .swift file should be commented out at this time.

It's not ideal but at least it kinda works.

0

Answer 6

sathoeni OP

Dec ’21

Solution to preview a SwiftUI View for watchOS (Standalone) and iOS:

Create a new scheme
In the Build Section only add the watchOS Target
Run the preview

I did not found a solution to display the view for the two targets at the same time (side by side) but at least I can preview it for every target by switching the scheme

Using compiler flags you can even customize the previews. For example testing darkMode on iOS or using a different device.

Group {
   MyView(model: viewModel) {}
   
   #if os(iOS)
      MyView(model: viewModel{}.
         preferredColorScheme(.dark)
   #endif
}

0