SwiftUI View and UIHostingController in UIScrollView breaks scrolling

Question

When I add a UIHostingController which contains a SwiftUI view as a childView, and then place that childView inside a UIScrollView, scrolling breaks.

Here I have my View

struct TestHeightView: View {
    let color: UIColor
    
    var body: some View {
        VStack {
            Text("THIS IS MY TEST")
                .frame(height: 90)
        }
            .fixedSize(horizontal: false, vertical: true)
            .background(Color(color))
            .edgesIgnoringSafeArea(.all)
    }
}

Then I have a UIViewController with a UIScrollView as the subView. Inside the UIScrollView there is a UIStackView that is correctly setup to allow loading UIViews and scrolling through them if the stack height becomes great enough. This works. If I were to load in 40 UILabels, it would scroll through them perfectly.

The problem arises when I add a plain old UIView, and then add a UIHostingController inside that container. I do so like this:

        let container = UIView()
        container.backgroundColor = color.0
        stackView.insertArrangedSubview(container, at: 0)
        let test = TestHeightView(color: color.1)
        let vc = UIHostingController(rootView: test)
        vc.view.backgroundColor = .clear

        add(child: vc, in: container)

    func add(child: UIViewController, in container: UIView) {
        addChild(child)
        container.addSubview(child.view)
        child.view.translatesAutoresizingMaskIntoConstraints = false

        child.view.topAnchor.constraint(equalTo: container.topAnchor, constant: 0).isActive = true
        child.view.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: 0).isActive = true
        child.view.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 0).isActive = true
        child.view.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: 0).isActive = true

        child.didMove(toParent: self)

    }

In my example I added 3 of these containerViews/UIHostingController and then one UIView (green) to demonstrate what is happening.

You can see that as I scroll, all views are suspended as a gap is formed. What is happening is that the containing UIView (light color) is expanding its height. Once the height reaches a certain value, scrolling continues as normal until the next container/UIHostingController reaches the top and it begins again.

I have worked on several different solutions .edgesIgnoringSafeArea(.all)

Does do something. I included it in my example because without it, the problem is exactly the same only more jarring and harder to explain using a video. Basically the same thing happens but without any animation, it just appears that the UIScrollView has stopped working, and then it works again

Edit:

I added another UIViewController just to make sure it wasn't children in general causing the issue. Nope. Only UIHostingControllers do this. Something in SwiftUI

Answer 1

Unbelievably this is the only answer I can come up with:

I found it on Twitter here https://twitter.com/b3ll/status/1193747288302075906?s=20 by Adam Bell

 class EMHostingController<Content> : UIHostingController<Content> where Content : View {
    func fixedSafeAreaInsets() {
        guard let _class = view?.classForCoder else { return }
        
        let safeAreaInsets: @convention(block) (AnyObject) -> UIEdgeInsets = { (sself : AnyObject!) -> UIEdgeInsets in
            return .zero
        }
        
        guard let method = class_getInstanceMethod(_class.self, #selector(getter: UIView.safeAreaInsets)) else { return }
        class_replaceMethod(_class, #selector(getter: UIView.safeAreaInsets), imp_implementationWithBlock(safeAreaInsets), method_getTypeEncoding(method))
        
        let safeAreaLayoutGuide: @convention(block) (AnyObject) ->UILayoutGuide? = { (sself: AnyObject!) -> UILayoutGuide? in
            return nil
        }
        guard let method2 = class_getInstanceMethod(_class.self, #selector(getter: UIView.safeAreaLayoutGuide)) else { return }
        class_replaceMethod(_class, #selector(getter: UIView.safeAreaLayoutGuide), imp_implementationWithBlock(safeAreaLayoutGuide), method_getTypeEncoding(method2))
    }
    
    override var prefersStatusBarHidden: Bool {
        return true
    }
}

Answer 2

Had the same issue recently, also confirm that safe area insets are breaking the scrolling. My fix on iOS 14+ with the ignoresSafeArea modifier:

    public var body: some View {
        if #available(iOS 14.0, *) {
            contentView
            .ignoresSafeArea()
        } else {
            contentView
        }
    }

Answer 3

I had a very similar issue and found a fix by adding the following to my UIHostingController subclass:

override func viewDidLoad() {
    super.viewDidLoad()
    edgesForExtendedLayout = []
}