SwiftUI hide a view by touching outside of its bounds - swift

Question

I'm trying to implement pop up alert, which basicly are view that appears on another view, how can i dismiss this alert view on top, when i tap outside of white box? screen
My logic of calling this alert: I have my main view, where i have facebook signIn button, which should call this alert view, my alert view is just another swiftui view, which has UIViewRepresentable object inside to make hyperlinks inside my text.
MAIN VIEW:
//
// WelcomeView.swift
//
//
//
//
import SwiftUI
import FacebookLogin
import SDWebImageSwiftUI
import NavigationStack
import AVKit
struct WelcomeView: View {
#State var showTermsAndConditionsAlert: Bool = false
ZStack { // 1 outer
ZStack { // 2 inner
VStack() {
ZStack(alignment: .top) {
// my video player here
HStack {
// some other ui elements
}
VStack {
// logo
}
}
}
HStack(alignment: .bottom) {
VStack {
Button(action: {
appLog.debug("Continue with Facebook")
showTermsAndConditionsAlert = true
}) {
AuthButtonView(imageIdentifier: "ic_facebook", buttonTitle: "welcome_page_sign_up_btn_fb".localized)
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(5)
}
// email button sign up
}
// email button sign in
}) {
}
// push views
}
.ignoresSafeArea()
}
}
.padding(.bottom, Theme.pageBottomPadding)
if showTermsAndConditionsAlert {
TermsConditionsAlertView() {
self.showTermsAndConditionsAlert = false
self.viewModel.facebookLogin()
}
}
}
.onTapGesture(perform: {
// TODO: close dialog only when it is opened and press outside of dialog bound
self.showTermsAndConditionsAlert = false
})
}
.navigationBarTitle("", displayMode: .automatic)
.onAppear {
self.player.isMuted = true
self.player.play()
}
.onDisappear {
self.player.pause()
}
.onReceive(viewModel.$state.dropFirst(), perform: { state in
// switch state
}
})
}
}
ALERT VIEW: HyperLinkTextView - uirepresantable uiview
//
// TermsConditionsAlertView.swift
//
//
//
//
import SwiftUI
import NavigationStack
struct TermsConditionsAlertView: View {
var callback: (() -> ())?
var body: some View {
ZStack {
Color.black.opacity(0.8).edgesIgnoringSafeArea(.all)
VStack(alignment: .leading, spacing: 0) {
// Text here
HyperLinkTextView(text: "terms_conditions_alert_view_description".localized,
links: [Hyperlink(word: "terms_conditions".localized, url: NSURL(string: Constants.termsURL)!),
Hyperlink(word: "privacy_policy".localized, url: NSURL(string: Constants.privacyPolicyURL)!)])
Button(action: {
appLog.debug("Agree and sign up pressed")
callback?()
}) {
// button struct
}
}
}
}
}
HYPERLINK UI VIEW:
//
// HyperLinkTextView.swift
//
//
//
//
import SwiftUI
struct Hyperlink {
var word: String
var url: NSURL
}
struct HyperLinkTextView: UIViewRepresentable {
private var text: String
private var links: [Hyperlink]
init(text: String, links: [Hyperlink]) {
self.text = text
self.links = links
}
func makeUIView(context: Self.Context) -> UITextView {
let attributedString = NSMutableAttributedString(string: text)
links.forEach { hyperlink in
let linkAttributes = [NSAttributedString.Key.link: hyperlink.url]
var nsRange = NSMakeRange(0, 0)
if let range = text.range(of: hyperlink.word) {
nsRange = NSRange(range, in: text)
}
attributedString.setAttributes(linkAttributes, range: nsRange)
attributedString.addAttribute(NSAttributedString.Key.underlineStyle, value: NSNumber(value: 1), range: nsRange)
}
let textView = UITextView()
textView.isEditable = false
textView.delegate = context.coordinator
textView.attributedText = attributedString
textView.linkTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.blue]
textView.isUserInteractionEnabled = true
return textView
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.font = UIFont(name: "ArialMT", size: 18)
}
func makeCoordinator() -> Coordinator {
Coordinator()
}
public class Coordinator: NSObject, UITextViewDelegate, NSLayoutManagerDelegate {
weak var textView: UITextView?
public func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction, replacementText text: String) -> Bool {
return true
}
}
}

Answer 1

Make a full screen view with a ZStack containing a view that is translucent, and put your alert on top of that. Add a tap gesture to the translucent view that dismisses the entire view.