Using environmentObject in watchOS

Question

I am trying to use environmentObject in a watchOS6 app to bind my data model to my view.

I have created a simple, stand-alone Watch app in Xcode 11.

I created a new DataModel class

import Combine
import Foundation
import SwiftUI

final class DataModel: BindableObject {

    let didChange = PassthroughSubject<DataModel,Never>()

    var aString: String = "" {
        didSet {
            didChange.send(self)
        }
    }

}

In my ContentView struct I bind this class using @EnvironmentObject -

struct ContentView : View {

    @EnvironmentObject private var dataModel: DataModel

    var body: some View {
        Text($dataModel.aString.value)
    }
}

Finally, I attempt to inject an instance of the DataModel into the environment in the HostingController class -

class HostingController : WKHostingController<ContentView> {
    override var body: ContentView {
        return ContentView().environmentObject(DataModel())
    }
}

But, I get an error:

Cannot convert return expression of type '_ModifiedContent<ContentView, _EnvironmentKeyWritingModifier<DataModel?>>' to return type 'ContentView'

The error is because the WKHostingController is a generic that needs a concrete type - WKHostingController<ContentView> in this case.

A similar approach works perfectly with UIHostingController in an iOS app because UIHostingController isn't a generic class.

Is there some other way to inject the environment to a watchOS view?

Actinolite

Does this answer your question? How to inject .environmentObject() in watchOS6 – Monumentalize

Answer 1

You can use type erasure, AnyView in the case of SwiftUI View.

I would refactor WKHostingController to return AnyView.

This seems to compile fine on my end.

class HostingController : WKHostingController<AnyView> {
    override var body: AnyView {
        return AnyView(ContentView().environmentObject(DataModel()))
    }
}

Gigantean

Thanks. I had tried AnyView but I hadn't used AnyView(ContentView()) – Actinolite

This doesn't work for me, I get the following error: "Property 'body' with type 'AnyView' cannot override a property with type 'ContentView'" – Tuna

Just got back to this after a few months, fresh eyes helps. I still had ContentView in the Generic protocol declaration, changed to AnyView and works. – Tuna

How do you get a child ContentView to access this in the latest WatchOS app templates? I have this working on my main ContentView, but when I route to a view with NavigationLink I can't figure out how that ContentView would have access to the same @EnvironmentObject – Artemisa

This is bad answer as AnyView is performance heavy. Long story short, put your data model inside content view. Here's better solution – Stacey

Answer 2

For anyone like Brett (in the comments) who was getting

"Property 'body' with type 'AnyView' cannot override a property with type 'ContentView'"

I got the same error because I hadn't replaced the return value and wrapped the ContentView being returned.

ie. this is what my first attempt looked like.. notice the WKHostingController<ContentView> that should be WKHostingController<AnyView>

class HostingController : WKHostingController<ContentView> {
    override var body: AnyView {
        return AnyView(ContentView().environmentObject(DataModel()))
    }
}

Abydos

I had done that bit though, but I hadn't replaced ContentView in WKHostingController<ContentView> with AnyView, that worked for me. Thanks for reply. – Tuna

Answer 3

Adding to Matteo's awesome answer,

If you want to use delegate then use like this:

class HostingController : WKHostingController<AnyView> {
    override var body: AnyView {
        var contentView = ContentView()
        contentView.environmentObject(DataModel())
        contentView.delegate = self
        let contentWrapperView = AnyView(contentView)
        return contentWrapperView
    }
}

Loree