SwiftUI native-like onboarding sheets

Last update: Dec 29, 2022

Related tags

Overview

Welcome Sheet

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.

Comments

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

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)

v1.1.1(Jan 23, 2022)
Fixes

Added .navigationViewStyle(StackNavigationViewStyle()) which fixed Mac Catalyst bug causing sheet to be displayed in split view (#1)

Source code(tar.gz)
Source code(zip)
v0.1.0(Dec 16, 2021)

This is the initial release of Welcome Sheets! 🎉
Source code(tar.gz)
Source code(zip)

SwiftUI native-like onboarding sheets

Related tags

Overview

Welcome Sheet

Usage

.welcomeSheet

WelcomeSheetPage

WelcomeSheetPageRow

Decodable support

Installation

Example

You might also like...

Emulates the native Remote Notification View.

This is a small View modifier that adds detents for native .sheet representations that appeared in iOS 16

A µFramework for showing alerts like the one used when copying from pasteboard or connecting Apple pencil

This is an iOS control for selecting a date using UIDatePicker in an UIAlertController like manner

Animated alert library like Swarm app.

This is an iOS control for presenting any UIView in an UIAlertController like manner

Swift library to manage in app notification in swift language, like WhatsApp, Telegram, Frind, ecc.

This is an iOS control for selecting something using UIPickerView in an UIAlertController like manner

A Google like action sheet for iOS written in Swift.

Comments

Support using the library from UIKit

Ability to display local document

Releases(v1.1.1)

v1.1.1(Jan 23, 2022)

Fixes

v0.1.0(Dec 16, 2021)

Owner

Jakub Florek

an extension library for SwiftUI sheets.

PageSheet - Customizable sheets using UISheetPresentationController in SwiftUI

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.

Share-sheet-example - A sample project that reproduces an issue with Share Sheets

Display Apple system-like self-hiding status alerts. It is well suited for notifying user without interrupting user flow in iOS-like way.

Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets. Support SwiftUI.

Create Apple-like alerts & toasts using SwiftUI

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

DropView - A SwiftUI library to display Apple Pencil and Pasteboard-like alerts on iOS.

Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets.