exyte/anchoredpopup

State management pitfall

AnchoredPopup uses UIWindow to display itself above anything you might have on screen, so remember - to get adequate UI updates, use ObservableObjects or @Bindings instead of @State. This won't work:

struct MainView: View {
    @State var name = "Mike"
    var body: some View {
        Text("Show popup")
            .useAsPopupAnchor(id: "a") {
                ZStack {
                    Color.red.size(100)
                    VStack {
                        Text(name)
                        Button("Change text") {
                            name = "John"
                        }
                    }
                }
            } customize: {
                $0.position(.anchorRelative(.bottomLeading))
                    .closeOnTap(false)
            }
    }
}

This will work:

struct MainView: View {
    @State var name = "Mike"
    var body: some View {
        Text("Show popup")
            .useAsPopupAnchor(id: "a") {
                Popup(name: $name)
            } customize: {
                $0.position(.anchorRelative(.bottomLeading))
                    .closeOnTap(false)
            }
    }
}

struct Popup: View {
    @Binding var name: String
    var body: some View {
        ZStack {
            Color.red.size(100)
            VStack {
                Text(name)
                Button("Change text") {
                    name = "John"
                }
            }
        }
    }
}

This will work too:

struct MainView: View {
    var body: some View {
        Text("Show popup")
            .useAsPopupAnchor(id: "a") {
                Popup()
            } customize: {
                $0.position(.anchorRelative(.bottomLeading))
                    .closeOnTap(false)
            }
    }
}

struct Popup: View {
    @State var name = "Mike"
    var body: some View {
        ZStack {
            Color.red.size(100)
            VStack {
                Text(name)
                Button("Change text") {
                    name = "John"
                }
            }
        }
    }
}

Examples

To try AnchoredPopup examples:

• Clone the repo https://github.com/exyte/AnchoredPopup.git
• Open AnchoredPopupExample.xcodeproj
• Try it!

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/AnchoredPopup.git")
]

Requirements

• iOS 16.0+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library Grid - The most powerful Grid container AnimatedTabBar - A tabbar with a number of preset animations ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll MediaPicker - Customizable media picker Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker OpenAI Wrapper lib for OpenAI REST API AnimatedGradient - Animated linear gradient ConcentricOnboarding - Animated onboarding flow FloatingButton - Floating button menu ActivityIndicatorView - A number of animated loading indicators ProgressIndicatorView - A number of animated progress indicators FlagAndCountryCode - Phone codes and flags for every country SVGView - SVG parser LiquidSwipe - Liquid navigation animation

Package Metadata

Repository: exyte/anchoredpopup

Default branch: main

README: README.md