• Stars
    star
    3,315
  • Rank 13,528 (Top 0.3 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Toasts and popups library written with SwiftUI

Β Β Β Β Β 

Floaters Toasts Popups Sheets

Popup View

Toasts, alerts and popups library written with SwiftUI

Read Article Β»

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

Update to version 2

Instead of:

.popup(isPresented: $floats.showingTopFirst, type: .floater(), position: .top, animation: .spring(), closeOnTapOutside: true, backgroundColor: .black.opacity(0.5)) {
    FloatTopFirst()
}

use:

.popup(isPresented: $floats.showingTopFirst) {
    FloatTopFirst()
} customize: {
    $0
        .type(.floater())
        .position(.top)
        .animation(.spring())
        .closeOnTapOutside(true)
        .backgroundColor(.black.opacity(0.5))
}

Using this API you can pass parameters in any order you like.

Show over navbar

To display your popup over all other views including navbars please use:

.popup(isPresented: $floats.showingTopFirst) {
    FloatTopFirst()
} customize: {
    $0.isOpaque(true)
}

This will also mean that you won't be able to tap "through" the popup's background on any of the controls "behind it" (that's because this method actually uses transparent fullscreenSheet, which won't pass the touches to underlying view). Opaque popup uses screen size to calculate its position.

Unfortunately, if opaque is false (to allow "through-touches" if you need them), popup - even if forced to be fullscreen, will be displayed under the navbar (if you know how to pass over this restriction, please do let me know in the comments). Please keep in mind that in this case the popup calculates its position using the frame of the view you attach it to, to avoid being under the navbar. So you'll likely want to attach it to the root view of your screen.

Usage

  1. Add a bool to control popup presentation state
  2. Add .popup modifier to your view.
import PopupView

struct ContentView: View {

    @State var showingPopup = false

    var body: some View {
        YourView()
            .popup(isPresented: $showingPopup) {
                Text("The popup")
                    .frame(width: 200, height: 60)
                    .background(Color(red: 0.85, green: 0.8, blue: 0.95))
                    .cornerRadius(30.0)
            } customize: {
                $0.autohideIn(2)
            }
    }
}

Required parameters

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

or

item - binding to item: if item's value is nil - popup is hidden, if non-nil - displayed. Be careful - library makes a copy of your item during dismiss animation!!
view - view you want to display on your popup

Available customizations - optional parameters

use customize closure in popup modifier:

type:

  • default - usual popup in the center of screen
  • toast - fitted to screen i.e. without padding and ignoring safe area
  • floater - has padding and can choose to use or ignore safe area
  • scroll - adds a scroll to your content, if you scroll to top of this scroll - the gesture will continue into popup's drag dismiss.

floater parameters:

  • verticalPadding - padding which will define padding from the relative vertical edge or will be added to safe area if useSafeAreaInset is true
  • horizontalPadding - padding which will define padding from the relative horizontal edge or will be added to safe area if useSafeAreaInset is true
  • useSafeAreaInset - whether to include safe area insets in floater padding

scroll parameters:
headerView - a view on top which won't be a part of the scroll (if you need one)

position - topLeading, top, topTrailing, leading, center, trailing, bottomLeading, bottom, bottomTrailing appearFrom - top, bottom, left, right: determines the direction of appearing animation. If left empty it copies position parameter: so appears from .top edge, if position is set to .top animation - custom animation for popup sliding onto screen
autohideIn - time after which popup should disappear
dragToDismiss - true by default: enable/disable drag to dismiss (upwards for .top popup types, downwards for .bottom and default type)
closeOnTap - true by default: enable/disable closing on tap on popup
closeOnTapOutside - false by default: enable/disable closing on tap on outside of popup
backgroundColor - Color.clear by default: change background color of outside area
backgroundView - custom background builder for outside area (if this one is set backgroundColor is ignored)
isOpaque - false by default: if true taps do not pass through popup's background and the popup is displayed on top of navbar. For more see section "Show over navbar"
useKeyboardSafeArea - false by default: if true popup goes up for keyboardHeight when keyboard is displayed dismissCallback - custom callback to call once the popup is dismissed

Draggable card - sheet

To implement a sheet (like in 4th gif) enable dragToDismiss on bottom toast (see example project for implementation of the card itself)

.popup(isPresented: $show) {
    // your content 
} customize: {
    $0
        .type (.toast)
        .position(bottom)
        .dragToDismiss(true)
}

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

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

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

pod 'ExytePopupView'

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

github "Exyte/PopupView"

Requirements

  • iOS 15.0+ / macOS 11.0+ / tvOS 14.0+ / watchOS 7.0+
  • Xcode 12+

Our other open source SwiftUI libraries

Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with number of preset animations
MediaPicker - Customizable media picker
Chat - Chat UI framework with fully customizable message cells, input view, and a built-in media picker
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

More Repositories

1

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support
Swift
6,005
star
2

Grid

The most powerful Grid container missed in SwiftUI
Swift
1,738
star
3

ARTetris

Augmented Reality Tetris made with ARKit and SceneKit
Swift
1,532
star
4

ActivityIndicatorView

A number of preset loading indicators created with SwiftUI
Swift
1,391
star
5

ConcentricOnboarding

SwiftUI library for a walkthrough or onboarding flow with tap actions
Swift
1,350
star
6

FloatingButton

Easily customizable floating button menu created with SwiftUI
Swift
1,098
star
7

ScalingHeaderScrollView

A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.
Swift
1,096
star
8

Chat

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker
Swift
833
star
9

ReadabilityKit

Preview extractor for news, articles and full-texts in Swift
Swift
830
star
10

fan-menu

Menu with a circular layout based on Macaw
Swift
728
star
11

SVGView

SVG parser and renderer written in SwiftUI
Swift
614
star
12

LiquidSwipe

Example of using SwiftUI to create a beautiful Liquid Swipe control
Swift
523
star
13

AnimatedTabBar

A tabbar with a number of preset animations written in pure SwiftUI
Swift
374
star
14

Macaw-Examples

Various usages of the Macaw library
Swift
353
star
15

AndroidAnimatedNavigationBar

AnimatedNavigationBar is a navigation bar with a number of preset animations written in Jetpack Compose
Kotlin
320
star
16

MediaPicker

Customizable media picker written with SwiftUI
Swift
316
star
17

replicating

Kotlin
247
star
18

ProgressIndicatorView

An iOS progress indicator view library written in SwiftUI
Swift
247
star
19

ComposeMultiplatformDribbbleAudio

A repo for the Dribbble Replicating Compose Multiplatform article
Kotlin
78
star
20

android-waves-progressbar

A depth gauge progress bar, inspired by Apple Watch dive widget.
Kotlin
46
star
21

clean-swift-article

Swift
37
star
22

FlagAndCountryCode

A country code and flag icon provider library for iOS apps
Swift
37
star
23

AnimatedGradient

Swift
35
star
24

sweet.eclipse

Sweet Eclipse
HTML
33
star
25

OpenAI

Swift
32
star
26

gaster

Ethereum transactions stats for your smart contracts
JavaScript
29
star
27

ShapedBackgroundAndroid

Repo for the instagram-like shaped background on Android
Kotlin
25
star
28

android-replicating

Replicating complex UI using Jetpack Compose
Kotlin
23
star
29

wwdc2020-tutorials

Swift
21
star
30

core-haptics-example

Swift
15
star
31

homebrew-formulae

Ruby
1
star