iosswiftswiftuiswiftui-state

UIHostingController embedded in UIViewController - how to update @State from outside?


I'm using a UIHostingController to embed ContentView inside ViewController. I want to change the name of ContentView's name when the "Change name" button is pressed. Here's my code:

class ViewController: UIViewController {

    var contentView: ContentView? /// keep reference to ContentView
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor.secondarySystemBackground
        
        /// add the button
        let button = UIButton()
        button.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
        button.setTitle("Change name", for: .normal)
        button.setTitleColor(.blue, for: .normal)
        button.addTarget(self, action: #selector(handleTap), for: .touchUpInside)
        view.addSubview(button)
        
        /// add the SwiftUI ContentView
        let contentView = ContentView()
        let hostingController = UIHostingController(rootView: contentView)
        self.contentView = contentView
        
        addChild(hostingController)
        view.insertSubview(hostingController.view, at: 0)
        hostingController.view.frame = CGRect(x: 0, y: 400, width: view.bounds.width, height: view.bounds.height - 400)
        hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        hostingController.didMove(toParent: self)
    }
    
    @objc func handleTap() {
        contentView?.updateLastCardName(name: "Updated name") /// update the name
    }
}

struct ContentView: View {
    @State var name = "Name"

    var body: some View {
        Text(name)
    }

    func updateLastCardName(name: String) {
        print("updating to \(name)")
        self.name = name /// but it's not updating!
    }
}

And the result:

The problem is that even though func updateLastCardName(name: String) { is getting called, when I set self.name = name there is no change. The Text continues to show "Name", not "Updated name".

I've read that @State should be local, so I tried getting around that with the updateLastCardName function. It does not work, though. Is my approach wrong?

How can I update ContentView's name from ViewController?


Solution

  • var contentView: ContentView? /// keep reference to ContentView
    

    This is wrong assumption, because ContentView is a struct, ie. value, so you keep a copy not a reference.

    Instead we should use instance of view model class as reference to communicate from UIKit into SwiftUI. Find below a modified code with approach demo.

    Tested with Xcode 12.4 / iOS 14.4

    class ViewModel: ObservableObject {
        @Published var name = "Name"
    }
    
    class ViewController: UIViewController {
    
        private var vm: ViewModel!
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            view.backgroundColor = UIColor.secondarySystemBackground
    
            /// add the button
            let button = UIButton()
            button.frame = CGRect(x: 50, y: 50, width: 200, height: 100)
            button.setTitle("Change name", for: .normal)
            button.setTitleColor(.blue, for: .normal)
            button.addTarget(self, action: #selector(handleTap), for: .touchUpInside)
            view.addSubview(button)
    
            /// add the SwiftUI ContentView
            self.vm = ViewModel()
            let contentView = ContentView(vm: self.vm)
            let hostingController = UIHostingController(rootView: contentView)
    
            addChild(hostingController)
            view.insertSubview(hostingController.view, at: 0)
            hostingController.view.frame = CGRect(x: 0, y: 400, width: view.bounds.width, height: view.bounds.height - 400)
            hostingController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
            hostingController.didMove(toParent: self)
        }
    
        @objc func handleTap() {
            vm.name = "Updated name" /// update the name
        }
    }
    
    struct ContentView: View {
        @ObservedObject var vm: ViewModel
    
        var body: some View {
            Text(vm.name)
        }
    }