SwiftUI native-like onboarding sheets

Related tags

Alert & Action Sheet Welcome-Sheet
Overview

Welcome Sheet

Welcome Sheet baner

Welcome sheet for swiftUI enables incredibly easy way for creating onboarding screens, update notes, or whatever you imagine! The main idea standing behind this project was to follow the design of Apple’s native onboarding screens as much as possible, that’s why you can be always sure they will look gorgeous on iPhone SE screen as well as on iPad Pro’s massive 12,9” display!

Usage

To create a welcome sheet simply add .welcomeSheet view modifier to your view and pass page array as an argument.

import SwiftUI
import WelcomeSheet

struct ContentView: View {
    @State private var showSheet = false
    
    let pages = [
        WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
            WelcomeSheetPageRow(imageSystemName: "rectangle.stack.fill.badge.plus",
                                title: "Quick Creation",
                                content: "It's incredibly intuitive. Simply declare an array of pages filled with content."),
            
            WelcomeSheetPageRow(imageSystemName: "slider.horizontal.3",
                                title: "Highly Customisable",
                                content: "Match sheet's appearance to your app, link buttons, perform actions after dismissal."),
            
            WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone",
                                title: "Works out of the box",
                                content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
        ])
    ]
    
    var body: some View {
        Button("Show sheet") {
            showSheet.toggle()
        }
        .welcomeSheet(isPresented: $showSheet, pages: pages)
    }
}

.welcomeSheet

.welcomeSheet presents welcome sheet with given pages when a binding to a Boolean value that you provide is true.

.welcomeSheet(isPresented: $showSheet, 
              onDismiss: { /* Run this code when sheet is dismissed */ }, 
              isSlideToDismissDisabled: true, 
              pages: pages)
  • isPresented - bool binding. When set to true presents sheet.
  • onDismiss - Closure called after sheet's dismissal.
  • isSlideToDismissDisabled - When set to true disables sheet's swipe to dismiss gesture.
  • pages - Table of pages to be displayed chronologically.

WelcomeSheetPage

WelcomeSheetPage type that describes page's content.

WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
    // Rows
],
accentColor: Color.purple, 
mainButtonTitle: "Let's go!",
optionalButtonTitle: "About Welcome Sheet...", 
optionalButtonURL: URL(string: "https://github.com/MAJKFL/Welcome-Sheet"))
  • title - Large title displayed on the top.
  • rows - Rows of content inside a body
  • mainButtonTitle - Optional title for a main button. Set to "Continue" by default.
  • accentColor - Color used for buttons. When set to nil, uses default accent colour.
  • optionalButtonTitle - Title for an optional button.
  • optionalButtonURL - URL to open when an optional button is pressed.

WelcomeSheetPageRow

WelcomeSheetPageRow describes row's content.

WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone", // Or `image: Image("ExampleImageName")`
                    accentColor: Color.green,
                    title: "Works out of the box",
                    content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
  • imageSystemName - SF Symbol name for image displayed at the beginning of a row.
  • image - Image displayed at the beginning of a row.
  • accentColor - Color used for an image. When set to nil, uses default accent colour.
  • title - Title displayed over a content.
  • content - Text displayed beneath a title.

Decodable support

You can decode pages from JSON.

[
   {
      "optionalButtonURL":"https:\/\/github.com\/MAJKFL\/Welcome-Sheet",
      "accentColor":"BF5AF2",
      "isShowingOptionalButton":true,
      "title":"Welcome to Welcome Sheet",
      "rows":[
         {
            "accentColor":"63E6E1",
            "title":"Quick Creation",
            "content":"Sheet creation is incredibly intuitive. Simply create an array of pages filled with your content.",
            "imageName":"rectangle.stack.fill.badge.plus"
         },
         {
            "accentColor":"5E5CE6",
            "title":"Highly Customizable",
            "content":"Set accent colors, add optional buttons, disable dismiss gestures, perform actions after button taps or sheet dismissal and more!",
            "imageName":"gears"
         },
         {
            "accentColor":"30D158",
            "title":"Works out of the box",
            "content":"Don't worry about different screen sizes. Your Welcome Sheet will look gorgeous on every iOS device!",
            "imageName":"ipad.and.iphone"
         }
      ],
      "optionalButtonTitle":"About Welcome Sheet...",
      "mainButtonTitle":"Continue"
   }
]

Note: imageName can store asset catalogue image name or SF Symbol name.

Installation

Using Swift Package Manager

.package(url: "https://github.com/MAJKFL/Welcome-Sheet", from: "0.1.0"),

Example

import SwiftUI
import WelcomeSheet

struct ContentView: View {
    @State private var showSheet = false
    
    let pages = [
        WelcomeSheetPage(title: "Welcome to Welcome Sheet", rows: [
            WelcomeSheetPageRow(imageSystemName: "rectangle.stack.fill.badge.plus",
                                accentColor: Color.mint,
                                title: "Quick Creation",
                                content: "It's incredibly intuitive. Simply declare an array of pages filled with content."),
            
            WelcomeSheetPageRow(imageSystemName: "slider.horizontal.3",
                                accentColor: Color.indigo,
                                title: "Highly Customisable", content: "Match sheet's appearance to your app, link buttons, perform actions after dismissal."),
            
            WelcomeSheetPageRow(imageSystemName: "ipad.and.iphone",
                                accentColor: Color.green,
                                title: "Works out of the box",
                                content: "Don't worry about various screen sizes. It will look gorgeous on every iOS device.")
        ], accentColor: Color.purple, optionalButtonTitle: "About Welcome Sheet...", optionalButtonURL: URL(string: "https://github.com/MAJKFL/Welcome-Sheet")),
        
        WelcomeSheetPage(title: "What's New in Translate", rows: [
            WelcomeSheetPageRow(imageSystemName: "platter.2.filled.iphone",
                                title: "Conversation Views",
                                content: "Choose a side-by-side or face-to-face conversation view."),
            
            WelcomeSheetPageRow(imageSystemName: "mic.badge.plus",
                                title: "Auto Translate",
                                content: "Respond in conversations without tapping the microphone button."),
            
            WelcomeSheetPageRow(imageSystemName: "iphone",
                                title: "System-Wide Translation",
                                content: "Translate selected text anywhere on your iPhone.")
        ], mainButtonTitle: "Wassup?")
    ]
    
    var body: some View {
        Button("Show sheet") {
            showSheet.toggle()
        }
        .welcomeSheet(isPresented: $showSheet, onDismiss: { print("Sheet dismissed") }, isSlideToDismissDisabled: true, pages: pages)
    }
}
You might also like...
Emulates the native Remote Notification View.
Emulates the native Remote Notification View.

Introduction HDNotificationView appears notification view like system. Requirement iOS 9.0+ Installation Carthage github "nhdang103/HDNotificationView

Nguyen Hai Dang 357 Nov 20, 2022
This is a small View modifier that adds detents for native .sheet representations that appeared in iOS 16

SheetDetentsModifier This is a small View modifier that adds detents for .sheet representations that appeared in iOS 16 It works starting with iOS 15

Alex Artemev 19 Oct 9, 2022
A µFramework for showing alerts like the one used when copying from pasteboard or connecting Apple pencil
A µFramework for showing alerts like the one used when copying from pasteboard or connecting Apple pencil

Drops 💧 A µFramework for showing alerts like the one used when copying from pasteboard or connecting Apple pencil. Features iOS 10+ Can be used in Sw

Omar Albeik 709 Dec 29, 2022
This is an iOS control for selecting a date using UIDatePicker in an UIAlertController like manner
This is an iOS control for selecting a date using UIDatePicker in an UIAlertController like manner

RMDateSelectionViewController This framework allows you to select a date by presenting an action sheet. In addition, it allows you to add actions arro

Roland Moers 1.2k Dec 13, 2022
Animated alert library like Swarm app.
Animated alert library like Swarm app.

TKSwarmAlert Animation Tool for Alert like Swarm app. ScreenShot Installation CocoaPods You can use CocoaPods to install TKSwarmAlert by adding it to

Takuya Okamoto 581 Dec 2, 2022
This is an iOS control for presenting any UIView in an UIAlertController like manner
This is an iOS control for presenting any UIView in an UIAlertController like manner

RMActionController This framework allows you to present just any view as an action sheet. In addition, it allows you to add actions around the present

Roland Moers 542 Dec 5, 2022
Swift library to manage in app notification in swift language, like WhatsApp, Telegram, Frind, ecc.
Swift library to manage in app notification in swift language, like WhatsApp, Telegram, Frind, ecc.

InAppNotify - Manage in App notifications During develop of my app Frind, I needed to manage in app notifications like whatsapp or telegram, but i did

Luca Becchetti 438 Nov 20, 2022
This is an iOS control for selecting something using UIPickerView in an UIAlertController like manner
This is an iOS control for selecting something using UIPickerView in an UIAlertController like manner

RMPickerViewController This framework allows you to pick something with a picker presented as an action sheet. In addition, it allows you to add actio

Roland Moers 382 Dec 19, 2022
A Google like action sheet for iOS written in Swift.
A Google like action sheet for iOS written in Swift.

MaterialActionSheetController Lightweight and totally customizable. Create and present it the way you do with UIAlertController. Screenshots Demo | De

Thanh-Nhon NGUYEN 103 Jun 29, 2022
Comments
  • Support using the library from UIKit

    Support using the library from UIKit

    Hi! I love the library, thank you for making it!

    This PR is more of a suggestion/discussion prompt to see what would be the best approach to support using WelcomeSheet from UIKit.

    I was looking into integrating some SwiftUI on a UIKit app, and seems like the onboarding might be a good place for it using WelcomeSheet. I wasn't sure of how I should tackle it, since this was designed to be used as a view modifier, so I came up with the attached helper class.

    It takes advantage of your ModalUIHostingController to create an erased UIViewController that can be used from UIKit to be presented. Here is how it would be used:

    final class ViewController: UIViewController {
    // ... All your setup

    // MARK: Welcome Sheet
    private var welcomeSheetController: UIViewController?

    func showWelcome() {
        let pages: [WelcomeSheetPage] = [
            .init(
                title: "Welcome to my App!",
                rows: [
                    .init(
                        imageSystemName: "questionmark.circle",
                        title: "Lorem Ipsum",
                        content: "dolor sit amet"
                    ),
                ],
                mainButtonTitle: "OK!"
            )
        ]

        self.welcomeSheetController = WelcomeSheetController.get(pages: pages) { [weak self] in
            self?.welcomeSheetController?.dismiss(animated: true)
        }

        present(self.welcomeSheetController!, animated: true)
    }
}

    Of course this is a simple and naive approach to it (my goal was to not change any APIs for now). Ideally, WelcomeSheetView would be exposed to use in an arbitrary UIHostingController but I'm not sure of what would need to be done to adapt the logic to decouple the WelcomeSheetView from the ModalUIHostingController as it is now, since it uses the environment to handle the dismissal.

    An idea would be to make WelcomeSheetView receive a closure that handles the tap in the last page's button. This way, the FormSheet would handle the dismissal for SwiftUI and in UIKit world the caller would be responsible to do it in a similar way to my example.

    Let me know if all this makes sense or if I am missing something and there is a better approach!

    Cheers 😄

    opened by kevinrpb 6
  • Ability to display local document

    Ability to display local document

    Your Welcome-Sheet looks awesome and works very well. I was wondering if you had any desire to add the ability to either display a document in a row or allow the button to open a local resource? My thought is for linking a local license file etc. I have an app that I would like to use your Welcome-Sheet, but the app has a requirement for working without any network/internet access and I want to have the ability to display a license from here.

    opened by MatthewMerritt 2
Releases(v1.1.1)
Owner
Jakub Florek
WWDC21 Scholar • iOS Developer at tarBUS
Jakub Florek
GitHub
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
PageSheet - Customizable sheets using UISheetPresentationController in SwiftUI

PageSheet Customizable sheet presentations in SwiftUI. Using UISheetPresentation

Eric Lewis 50 Oct 7, 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
Share-sheet-example - A sample project that reproduces an issue with Share Sheets

Hello, DTS! This project demonstrates the issue I'm having with the Share Sheet.

Marcos Tanaka 0 Feb 11, 2022
Display Apple system-like self-hiding status alerts. It is well suited for notifying user without interrupting user flow in iOS-like way.

StatusAlert is being sponsored by the following tool; please help to support us by takin a look and signing up to a free trial. Dependency managers Fe

Yehor Miroshnychenko 841 Dec 6, 2022
Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets. Support SwiftUI.

SPAlert Popup from Apple Music & Feedback in AppStore. Contains Done, Heart, Error and other presets. Supports Dark Mode. I tried to recreate Apple's

Ivan Vorobei 1.4k Dec 10, 2021
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
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
Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets.

SPAlert Popup from Apple Music & Feedback in AppStore. Contains Done, Heart, Error and other presets. Supports Dark Mode. I tried to recreate Apple's

Ivan Vorobei 1.8k Jan 7, 2023