CODEWITHSUNDEEP
swiftswiftuisfsafariviewcontroller
sbdchd
sbdchd

Reputation: 676

how do I fix the gap at the bottom of a sheet with SFSafariViewController

I'm trying to embed Safari in a drawer in swiftui. Clicking a button will open the drawer with the SFSafariViewController.

I have the following code:

import SwiftUI
import SafariServices

struct SFSafariView: UIViewControllerRepresentable {
    let url: URL
    func makeUIViewController(context: UIViewControllerRepresentableContext<Self>) -> SFSafariViewController {
        return SFSafariViewController(url: url)
    }
    func updateUIViewController(_ uiViewController: SFSafariViewController, context: UIViewControllerRepresentableContext<SFSafariView>) {
    }
}

struct SafariDrawerView: View {
  @State private var showUrl = true
  var body: some View {
    Button(
      action: {},
      label: {}
    )
    .buttonStyle(BorderlessButtonStyle())
    .sheet(isPresented: $showUrl, onDismiss: {}, content: {
      SFSafariView(url: URL(string: "https://github.com")!)
    })
  }
}

#Preview {
  SafariDrawerView()
}

This works, but there is a gap at the bottom of the drawer that doesn't look great. How do I fix this gap?

The gap:

enter image description here

Looking at other apps that use Safari in a drawer, they don't have this gap:

safari in a drawer in instagram doesn't have a gap

Upvotes: 1

Views: 149

Answers (1)

sbdchd
sbdchd

Reputation: 676

I ended up needing to use .edgesIgnoringSafeArea(.bottom) on the SFSafariView

so instead of

.sheet(isPresented: $showUrl, onDismiss: {}, content: {
  SFSafariView(url: URL(string: "https://github.com")!)
})

I needed to do:

.sheet(isPresented: $showUrl, onDismiss: {}, content: {
  SFSafariView(url: URL(string: "https://github.com")!)
    .edgesIgnoringSafeArea(.bottom)
})

Upvotes: 2

Related Questions