Giter Club home page Giter Club logo

systemnotification's Introduction

SystemNotification


Version Platform Swift 5.3 MIT License Twitter: @danielsaidi

About SystemNotification

SystemNotification is lets you mimic the native iOS system notification (that is presented when e.g. toggling silent mode on and off) in your SwiftUI apps.

The result can look like this...or completely different:

These notifications have a default style, but can be customized to fit your specific app.

Installation

Swift Package Manager

https://github.com/danielsaidi/SystemNotification.git

CocoaPods

pod SystemNotification

Getting started

SystemNotification contains a SystemNotification view, that can be created with an isActive binding, an optional configuration and a custom view.

For instance:

let notification = SystemNotification(
    isActive: $isNotificationActive,
    configuration: .init(edge: .bottom)) { _ in
        SystemNotificationMessage(
            icon: Image(systemName: "exclamationmark.triangle"), 
            title: "Alert", 
            text: "Something happened!",
            configuration: .init(iconColor: .red)
        )
    }

You can use any view you like in the notification:

let notification = SystemNotification(
    isActive: $isNotificationActive,
    configuration: .init(edge: .bottom)) { _ in
        Color.red.frame(height: 150)
    }

If you want to use a standard SystemNotificationMessage, you can use this shorthand:

let notification = SystemNotification(
    icon: Image?,
    title: String,
    text: String,
    isActive: $isNotificationActive,
    configuration: SystemNotification.Configuration(edge: .bottom))

You can add any notification to any view, using the systemNotification modifier:

List(items) { item
   HStack { item.name }
}.systemNotification(notification)

You can now present the notification by setting isNotificationActive to true.

SystemNotificationContext

While the above examples show how easy it is to add a notification to a view, you may want to present many different notifications.

Instead of having to use a state and a modifier per notification, you can use a SystemNotificationContext to present multiple notifications with a single modifier.

Just create a @StateObject in your presenting view, then use the context-specific modifier:

@StateObject private var context = SystemNotificationContext()

List(items) { item
   HStack { item.name }
}.systemNotification(context: context)

You can now present notifications buy using the present functions of the context. You can present any view and use any configuration:

context.present(
    content: notification,
    configuration: .init(backgroundColor: .red))

I really recomment the context approach for more complex use-cases.

Configurations

SystemNotification

A SystemNotification can be configured with a configuration that specifies:

  • animation
  • backgroundColor
  • cornerRadius
  • edge
  • minWidth
  • duration
  • shadowRadius
  • shadowOffset
  • shadowRadius

You can customize these properties to control how the notification looks and behaves.

The default configuration makes the notification look and behave like the native one.

SystemNotificationMessage

A SystemNotificationMessage view can be configured with a configuration that specifies:

  • iconColor
  • iconFont
  • padding
  • textColor
  • textFont
  • titleColor
  • titleFont

You can customize these properties to control how the notification message looks.

The default configuration makes the message look like the native one.

Demo app

This repo contains a basic demo app that demonstrates how to use the bottom sheet.

Just open the Demo project and run the app.

Contact me

Feel free to reach out if you have questions or if you want to contribute in any way:

License

SystemNotification is available under the MIT license. See LICENSE file for more info.

systemnotification's People

Contributors

danielsaidi avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.