Admob Ad Inflates, but overlaps existing views in SwiftUI - swift

Question

I have this app that I am trying to use AdMob with that is made with SwiftUI. I had been using official AdMob documentation with SwiftUI to help me do this. I have one issue however, the ad successfully gets loaded, but the ad is located underneath another view, much like a ZStack without a ZStack present. No matter where I put it, it gets placed beneath a view. I have used the .frame() attribute, and it works using the BannerAd view, but then there is a giant white space there when the ad can't be loaded. Here are screenshots that may help solve the issue:
(Image on the left) This is what happens using the Google provided code (They say that the banner would reload into its own view when the ad is loaded, but does not appear to happen) As you can see, the add is below the name of the current herb.
(Image on the right)This is what happens when using the .frame() attribute before the ad is loaded. The ad loads correctly, but leaves this white space when not loaded or unable to load.
Here is the code to make the banner work with SwiftUI
import SwiftUI
import Foundation
import GoogleMobileAds
protocol BannerViewControllerWidthDelegate: AnyObject {
func bannerViewController(_ bannerViewController: BannerViewController, didUpdate width: CGFloat)
}
class BannerViewController: UIViewController {
weak var delegate: BannerViewControllerWidthDelegate?
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// Tell the delegate the initial ad width.
delegate?.bannerViewController(self, didUpdate: view.frame.inset(by: view.safeAreaInsets).size.width)
}
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate { _ in
// do nothing
} completion: { _ in
// Notify the delegate of ad width changes.
self.delegate?.bannerViewController(
self, didUpdate: self.view.frame.inset(by: self.view.safeAreaInsets).size.width)
}
}
}
struct BannerAd: UIViewControllerRepresentable {
#State private var viewWidth: CGFloat = .zero
private let bannerView = GADBannerView()
private let adUnitID = "ca-app-pub-3940256099942544/6300978111"
// Make the view to be used in SwiftUI
func makeUIViewController(context: Context) -> some UIViewController {
let bannerViewController = BannerViewController()
bannerView.adUnitID = adUnitID
bannerView.rootViewController = bannerViewController
bannerViewController.view.addSubview(bannerView)
bannerViewController.delegate = context.coordinator
return bannerViewController
}
func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
if(viewWidth != .zero){
// Nothing happens
} else {
// Return when the size is greater than 0
//TODO: Fix !!!! This does not push other views down as it should, a frame could be set, but the ad does not push everything down or up
return
}
// Request a banner ad with the updated viewWidth.
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView.load(GADRequest())
}
}
}
The code may be long, but you can ignore the coordinator as that is only for listeners, not nay real displaying of the advertisement.
What I want to happen exactly is for the Ad to move every object down so that when the ad is loaded, it will fit respectfully at the top of the page. I have looked at all sorts of sources, but I cannot find any solutions to this anywhere. Please help me, and thank you!