- Published on
- Tested on Xcode 16.2
- 1 min read
> Creating a WebView with a transparent background in SwiftUI
To create a WebView with a transparent background in SwiftUI, we can use a UIViewRepresentable to wrap a WKWebView. We need to set the isOpaque property to false and the backgroundColor property to .clear to achieve a transparent background.
import SwiftUI
import WebKit
struct TransparentWebView: UIViewRepresentable {
private let request: URLRequest
init(
url: URL,
cachePolicy: URLRequest.CachePolicy = .useProtocolCachePolicy,
timeoutInterval: TimeInterval = 60.0
) {
request = URLRequest(
url: url,
cachePolicy: cachePolicy,
timeoutInterval: timeoutInterval
)
}
func makeUIView(context: Context) -> WKWebView {
let webview = WKWebView()
webview.load(request)
webview.allowsLinkPreview = false
webview.allowsBackForwardNavigationGestures = false
webview.isOpaque = false
webview.scrollView.backgroundColor = .clear
webview.backgroundColor = .clear
return webview
}
func updateUIView(_ uiView: WKWebView, context: Context) {
uiView.reload()
}
}
// Continue_Learning
How to display a GIF from a URL in SwiftUI
Learn how to use a WKWebView as a quick way to load a GIF from a URL and display it in a SwiftUI view.
Replacing UIScreen.main Before iPhone Duo Arrives
UIScreen.main assumes your app lives on one screen with one size. iPhone Duo, iPhone Mirroring, and iPad windowing all break that assumption. Here's what to use instead in UIKit and SwiftUI.
onHingeChange: Read iPhone Duo Hinge Angle in SwiftUI
iOS 27.1 lets you read iPhone Duo's hinge angle and fold status with onHingeChange in SwiftUI and UIHingeInteraction in UIKit. Here's how the APIs work, why they're for interactive effects rather than layout, and a fold-to-scrub example.
// Stay Updated
Get notified when I publish new tutorials on Swift, SwiftUI, and iOS development. No spam, unsubscribe anytime.