TopAnchor of viewController changin in iMessage Extension between presentation modes

Question

I'm making a survey iMessage app (yeah I know) and having a problem moving between the presentation modes. The series of screenshots below shows that when the app launches, all is fine in the compact mode. When expanded everything is still correct but then when I go back to compact the content is shifted down by what looks like the same height as the large messages nav bar (86 I believe)

I've tried setting the top constraint to be -86 when switching back to the compact view, however, this either does nothing or sends it back to where is should be and then subtracts 86 so it dissapears too high up. I've based this project on the IceCream example project from app so not sure where this issue is coming from (probably autolayout but everything is pinned to the layout guides)

Here's the code that adds the view controller:

func loadTheViewController(controller: UIViewController) {
    // Remove any existing child controllers.
    for child in childViewControllers {
        child.willMove(toParentViewController: nil)
        child.view.removeFromSuperview()
        child.removeFromParentViewController()
    }

    // Embed the new controller.
    addChildViewController(controller)

    controller.view.frame = view.bounds
    controller.view.translatesAutoresizingMaskIntoConstraints = true
    view.addSubview(controller.view)

    controller.view.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    controller.view.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    controller.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    controller.view.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    controller.didMove(toParentViewController: self)
}

I've been working on this for what feels forever so any suggestions welcome.

Answer 1

You are setting up constraints on view but you have set translatesAutoresizingMaskIntoConstraints to true. The autoresizing mask constraints will likely conflict with the constraints you are adding, cause unexpected results. You should change to:

controller.view.translatesAutoresizingMaskIntoConstraints = false

Also rather than pinning to view.topAnchor, you should pin to the topLayoutGuide, which will take the top navigation bar into account.

controller.view.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true

Similarly,

controller.view.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor).isActive = true