Toasts and popups library written with SwiftUI

Overview

Popup View

Toasts and popups library written with SwiftUI


We are a development agency building phenomenal apps.




Twitter Version Carthage Compatible License Platform

Usage

  1. Put all your body code into a ZStack
  2. Add a binding bool to control popup presentation state
  3. Add .popup modifier to your ZStack
@State var showingPopup = false

struct ContentView: View {
    var body: some View {
        ZStack {
            // your view
        }
        .popup(isPresented: $showingPopup, autohideIn: 2) {
            HStack {
                Text("The popup")
            }
            .frame(width: 200, height: 60)
            .background(Color(red: 0.85, green: 0.8, blue: 0.95))
            .cornerRadius(30.0)
        }
    }
}

Required parameters

presented - binding to determine if the popup should be seen on screen or hidden
view - view you want to display on your popup

Available customizations - optional parameters

type - toast, float or default
position - top or bottom (for default case it just determines animation direction)
animation - custom animation for popup sliding onto screen
autohideIn - time after which popup should disappear

Examples

To try PopupView examples:

  • Clone the repo https://github.com/exyte/PopupView.git
  • Open terminal and run cd <PopupViewRepo>/Example/
  • Run pod install to install all dependencies
  • Run open PopupViewExample.xcworkspace/ to open project in the Xcode
  • Try it!

Installation

CocoaPods

To install PopupView, simply add the following line to your Podfile:

pod 'ExytePopupView'

Carthage

To integrate PopupView into your Xcode project using Carthage, specify it in your Cartfile

github "Exyte/PopupView"

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/PopupView.git", from: "0.0.1")
]

Manually

Drop PopupView.swift in your project.

Requirements

  • iOS 13+
  • Xcode 11+
Comments
  • Add .popup(item:) variant

    Add .popup(item:) variant

    There's a need to pass information to the toast UI. SwiftUI handles this for various views by providing an item variant for view modifiers:

        public func popover<Item, Content>(item: Binding<Item?>, attachmentAnchor: PopoverAttachmentAnchor = .rect(.bounds), arrowEdge: Edge = .top, @ViewBuilder content: @escaping (Item) -> Content) -> some View where Item : Identifiable, Content : View
    

    I'm looking at your code and wondering how hard it would be to add the same thing, but I don't quite understand everything you're doing in yours.

    opened by JetForMe 11
  • popup not showing correctly

    popup not showing correctly

    Hi ,

    I am working on app, to show toast message using below code.

    But issue is If once Popup toast show, second time it's not showing.

    struct ContentView2: View {
        @State var showingPopup = false
    
        var body: some View {
            ZStack {
                Color.yellow
                VStack {
                    Button("Show Popup", action: {
                        showingPopup = true
                    })
                }
            }
            .popup(isPresented: $showingPopup, type: .toast, position: .bottom, autohideIn: 2) {
                Text("The popup")
                    .frame(width: 200, height: 60)
                    .background(Color(red: 0.85, green: 0.8, blue: 0.95))
                    .cornerRadius(30.0)
            }
        }
    }
    

    https://user-images.githubusercontent.com/2367614/181250056-eb963e2b-00dc-46e5-a2aa-d037ed12b9f3.mov

    M I doing something wrong? How can is show different toast messages in same view?

    opened by toseefkhilji 8
  • Added unwrapped item back to builder closure while preserving dismissal animation.

    Added unwrapped item back to builder closure while preserving dismissal animation.

    As the title says, this pull request is all about re-introducing the unwrapped item back into the builder closure. I was able to preserve the animation by caching the last non-nil Item value and falling back to it within the sheet when item is nil.

    opened by rzulkoski 7
  • Improvement: Drag to dismiss

    Improvement: Drag to dismiss

    Hi ! Thanks for your work and for sharing with us this library. I'm coming with a suggestion for improving the UX regarding the options that a user has in order to dismiss the popup. It would be cool if the user would be able to dismiss it by dragging down. Thanks a lot !

    opened by lrun-cmck 7
  • Popup blocks touch propagation to List View

    Popup blocks touch propagation to List View

    When using this library with a List and Navigation links, you have to hold the list cell to activate the navigation link or swipe to delete.

    Here is the code I'm using to set up the toast:

    .popup(isPresented: $showCopiedToast,
                       type: .toast,
                       position: .bottom,
                       autohideIn: 2,
                       closeOnTap: false) {
                    HStack {
                        Text(self.toastText)
                    }
                    .frame(width: 200, height: 60)
                    .background(Color(red: 0.85, green: 0.8, blue: 0.95))
                    .cornerRadius(30.0)
                    .padding(15)
                }
    

    My guess is the simultaneousGesture stuff is messing with the list view. A workaround or fix would be appreciated.

    opened by SlayterDev 7
  • Is there a way to make the toast show on top of modals?

    Is there a way to make the toast show on top of modals?

    Ideally we'd like to be able to display a toast and it appear no matter if there was a modal on the screen or not. Right now if there is a modal the toast appears underneath it. We could add the view modifier onto this modal view, but then the toast would go down once the view was dismissed. Is this something that is possible?

    opened by bratxdy 5
  • Keep getting

    Keep getting "Invalid frame dimension" error

    When dismissing the popup view, got error message often, anyone know how to resolve it?

    2021-04-14 12:51:35.864282+0800 gikiapp[923:160335] [SwiftUI] Invalid frame dimension (negative or non-finite).
    2021-04-14 12:51:35.883202+0800 gikiapp[923:160335] [SwiftUI] Invalid frame dimension (negative or non-finite).
    
    opened by metrue 5
  • Popup view should be lazy loaded

    Popup view should be lazy loaded

    Here is an example

    The current implemention is even showSystemAlertNotification = false, popup body is still executed. This could bring some problems in reality:

    data struct is set a valid value only if showSystemAlertNotification= true. Since it's not lazy-loaded, a crash happens since self.systemAlertNotification = nil

    .popup(isPresented: $showSystemAlertNotification, type: .floater(), position: .top, animation: Animation.spring()) {
                    SystemAlert(alert: self.data!)
                }
    
    opened by ghost 5
  • Need to get dismiss source

    Need to get dismiss source

    I want to react differently when popup is dismissed because of a tap or because of a drag.

    Here is the changes I've made to accomplish this πŸ‘‡

    PopupChanges

    Is there another way of achieving what I want ? I tried adding a click on my view but it doesn't work well since it doesn't take into account your drag handling code.

    Do you think that can interest other users ? Do you want me to do a pull request ?

    opened by CedricSoubrie 4
  • Redrawing of views

    Redrawing of views

    Changing how the view is shown would prevent reloading of the content.

    public func body(content: Content) -> some View {
            Group {
                main(content: content)
            }
            .valueChanged(value: isPresented) { isPresented in
                appearAction(isPresented: isPresented)
            }
        }
        
        private func main(content: Content) -> some View {
            ZStack {
                content
                    .frameGetter($presenterContentRect)
                
                if showContent {
                    backgroundColor
                        .applyIf(closeOnTapOutside) { view in
                            view.contentShape(Rectangle())
                        }
                        .addTapIfNotTV(if: closeOnTapOutside) {
                            dismiss()
                        }
                        .edgesIgnoringSafeArea(.all)
                        .opacity(currentBackgroundOpacity)
                        .animation(animation)
                }
            }
            .overlay(sheet())
        }
    
    opened by iankoex 4
  • Popup view makes the child view navigate to top

    Popup view makes the child view navigate to top

    Xcode. 13.1 iOS 15.0

    At the end of a long list I want to trigger a popup view. When the user triggers it the scrollview is reset to beginning.

    struct ChildView: View {
        
        @Binding var show: Bool
        let text: String
        
        var body: some View {
            
            ScrollView(.vertical, showsIndicators: false) {
                ForEach(0..<50) { _ in
                    Text("Hello World")
                        .padding()
                }
                
                VStack {
                    Button {
                        show.toggle()
                    } label: {
                        Text(text)
                    }
                }
            }
            .clipped()
    
        }
    }
    
    
    struct TabsView: View {
        
        @State var show = false
        
        var body: some View {
            
            ZStack {
                TabView {
                    ChildView(show: $show, text: "FirstView")
                        .tabItem({
                            Label("First", systemImage: "greetingcard")
                        })
                }
            }
            .popup(isPresented: $show, type: .default, dragToDismiss: true, closeOnTap: false, closeOnTapOutside: true, backgroundColor: .black.opacity(0.5)) {
                VStack {
                    Text("πŸ‘»")
                    Text("Hello World.")
                    Button {
                        show.toggle()
                    } label: {
                        Text("Dismiss ")
                    }
                }
                .padding(.vertical, 20)
                .padding(.horizontal, 40)
                .frame(width: 300, height: 300)
                .background(.red)
                .cornerRadius(10)
            }
        }
    }
    
    
    opened by solkpolk 4
  • How to make width of popup to all screen?

    How to make width of popup to all screen?

    Hello,

    firstly, thank you for amazing lib!

    I'm trying to implement a pop up and make it all screen width. I've tried .frame(maxWidth: .infinity) but it doesn't help.

    Maybe you can share some cool design of popups (like you used in screenshot on readme page)?

    opened by azaitsev 1
  • Popup from bottom does not cover navigation bar

    Popup from bottom does not cover navigation bar

    Hi,

    Great library!

    I'm trying to replace partialSheet with the bottom popupview from this library, but I'm having trouble with the navigation bar. The solution proposed here (https://github.com/exyte/PopupView/issues/61#issuecomment-1118347975) animates weird because you can see the transparent view come up from the bottom.

    How would one get the the same behavior as in the partial sheet library? The main reason I'm considering switching is because they do not support activity sheets for iPads.

    https://github.com/AndreaMiotto/PartialSheet

    Thanks,

    opened by jtressle 1
  • Keyboard handling for popups

    Keyboard handling for popups

    Keyboard area is not handled for popups

    I'm using floater type to show a popup. (bottom popup version 2 from example)

    .popup(isPresented: $showForgotPassword, type: .floater(verticalPadding: 0, useSafeAreaInset: false), position: .bottom, dragToDismiss: false, closeOnTap: false, backgroundColor: .black.opacity(0.4)) {
                ForgotPasswordView(forgotPasswordViewModel: ForgotPasswordViewModel(email: email))
            }
    

    And this is the result

    Simulator Screen Shot - iPhone 14 Pro Max - 2022-10-13 at 18 25 34

    Simulator Screen Shot - iPhone 14 Pro Max - 2022-10-13 at 18 25 37

    opened by rajdhakategraphy 0
Owner
Exyte
Exyte
Create Apple-like alerts & toasts using SwiftUI

AlertToast-SwiftUI Present Apple-like alert & toast in SwiftUI ?? Example ?? Overview Currently in SwiftUI, the only way to inform the user about some

Elai Zuberman 1.1k Dec 29, 2022
iOS tweak to display toasts for Low Power alerts and charging

Electrode iOS tweak to display toasts for Low Power alerts and charging. Localization Want to help translate Electrode to your language? Sumbit a pull

null 8 Sep 7, 2022
🍞 Loaf is a Swifty Framework for Easy iOS Toasts

Loaf ?? Inspired by Android's Toast, Loaf is a Swifty Framework for Easy iOS Toasts Usage From any view controller, a Loaf can be presented by calling

Mat Schmid 995 Dec 28, 2022
SwiftOverlays is a Swift GUI library for displaying various popups and notifications

SwiftOverlays is a Swift GUI library for displaying various popups and notifications. SwiftOverlays animated logo is kindly made by Crafted Pixels Fea

Peter Prokop 632 Dec 22, 2022
FloatingActionSheetController is a cool design ActionSheetController library written in Swift2.

FloationgActionSheetController FloatingActionSheetController is a cool design ActionSheetController library written in Swift2. Overview Requirements X

Ryo Aoyama 141 Oct 30, 2022
Animated Alert written in SwiftUI.

TransactionAlert Animated Alert written in SwiftUI. Easy to use Get Started Add a TAViewModel instance as an environment object to your Root View in y

null 11 Jul 21, 2022
An iOS library for SwiftUI to create draggable sheet experiences similar to iOS applications like Maps and Stocks.

An iOS library for SwiftUI to create draggable sheet experiences similar to iOS applications like Maps and Stocks.

Wouter 63 Jan 5, 2023
DropView - A SwiftUI library to display Apple Pencil and Pasteboard-like alerts on iOS.

DropView is a SwiftUI-based library to display alerts inspired by the Apple Pencil and pasteboard stock ones.

Stefano Bertagno 46 Dec 4, 2022
zekunyan 608 Dec 30, 2022
an extension library for SwiftUI sheets.

SheetKit SheetKit is an extension library for SwiftUI sheets. δΈ­ζ–‡η‰ˆθ―΄ζ˜Ž with Picture What is SheetKit SheetKit is a library of extensions for SwiftUI moda

δΈœε‘θ‚˜ε­ 65 Dec 31, 2022
Highly customizable alertview and alert/notification/success/error/alarm popup written in Swift

CDAlertView is highly customizable alert popup written in Swift. Usage is similar to UIAlertController. Screenshots Animations Usage Basic usage witho

Candost Dagdeviren 1.1k Dec 30, 2022
Fully customizable and extensible action sheet controller written in Swift

XLActionController By XMARTLABS. XLActionController is an extensible library to quickly create any custom action sheet controller. Examples The action

xmartlabs 3.3k Dec 31, 2022
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexibl

Sebastian Boldt 2.4k Dec 25, 2022
It is a highly configurable iOS library which allows easy styling with built in styles as well as extra header and footer views so that you can make extremely unique alerts and action sheets.

ο£Ώ CFAlertViewController CFAlertViewController is a library that helps you display and customise Alerts, Action Sheets, and Notifications on iPad and i

Crowdfire Inc. 1.1k Dec 18, 2022
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.

Introduction Popup Dialog is a simple, customizable popup dialog written in Swift. Features Easy to use API with hardly any boilerplate code Convenien

Orderella Ltd. 3.8k Dec 20, 2022
Beautiful animated Alert View. Written in Swift

SCLAlertView Animated Alert View written in Swift, which can be used as a UIAlertView or UIAlertController replacement. Since UIAlertView is deprecate

Viktor Radchenko 5.2k Jan 3, 2023
Live animated Alert View for iOS written in Swift

Sweet Alert iOS Beautiful Animated custom Alert View inspired from javascript library SweetAlert. Written in Swift this SweetAlertView can be used in

Sahil 2k Dec 22, 2022
A message bar for iOS written in Swift.

Dodo, a message bar for iOS / Swift This is a UI widget for showing text messages in iOS apps. It is useful for showing short messages to the user, so

Evgenii Neumerzhitckii 874 Dec 13, 2022
A message bar for iOS written in Swift.

Dodo, a message bar for iOS / Swift This is a UI widget for showing text messages in iOS apps. It is useful for showing short messages to the user, so

Evgenii Neumerzhitckii 874 Dec 13, 2022