├── OnboardingView.swift
└── README.md


/OnboardingView.swift:
--------------------------------------------------------------------------------
  1 | //
  2 | //  OnboardingView.swift
  3 | //
  4 | //  Created by Adam Lyttle on 2/5/2023.
  5 | //
  6 | //  adamlyttleapps.com
  7 | //  twitter.com/adamlyttleapps
  8 | //
  9 | //  Usage:
 10 | /*
 11 | OnboardingView(appName: "Real Estate Calculator", features: [
 12 |     Feature(title: "Mortgage Repayments", description: "Easily calculate weekly, monthly and yearly repayments ", icon: "house"),
 13 |     Feature(title: "Amortization", description: "Quickly view amortization for the life of the loan", icon: "chart.line.downtrend.xyaxis"),
 14 |     Feature(title: "Deposit Calculator", description: "Calculate deposit based on purchase price and savings", icon: "percent"),
 15 |     Feature(title: "Ad-Free Experience", description: "Thank you for downloading my app, I hope you enjoy it :-)", icon: "party.popper"),
 16 | ], color: Color.blue)
 17 | */
 18 | 
 19 | import SwiftUI
 20 | 
 21 | struct Feature: Identifiable {
 22 |     let id = UUID()
 23 |     let title: String
 24 |     let description: String
 25 |     let icon: String?
 26 | }
 27 | 
 28 | struct OnboardingView: View {
 29 |     @State var appName: String
 30 |     @State private var closingOnboarding = false
 31 |     @State private var showingOnboarding = false
 32 |     let features: [Feature]
 33 |     let color: Color?
 34 |     var body: some View {
 35 |         VStack {}
 36 |         .hidden()
 37 |         .onAppear() {
 38 |             let defaults = UserDefaults.standard
 39 |             let seen = defaults.bool(forKey: "OnboardingSeen")
 40 |             if(!seen) {
 41 |                 //the onboarding has not been seen, trigger the onboarding screen
 42 |                 showingOnboarding = true
 43 |             }
 44 |         }
 45 |         .sheet(isPresented: $showingOnboarding) {
 46 |             VStack {
 47 |                 Text("Welcome to \(appName)")
 48 |                     .font(.largeTitle)
 49 |                     .fontWeight(.bold)
 50 |                     .padding(.vertical, 50)
 51 |                     .multilineTextAlignment(.center)
 52 |                 Spacer()
 53 |                 VStack {
 54 |                     ForEach(features) { feature in
 55 |                         VStack(alignment: .leading) {
 56 |                             HStack {
 57 |                                 if let icon = feature.icon {
 58 |                                     Image(systemName: icon)
 59 |                                         .resizable()
 60 |                                         .aspectRatio(contentMode: .fit)
 61 |                                         .frame(width: 45, alignment: .center)
 62 |                                         .clipped()
 63 |                                         .foregroundColor(color ?? Color.blue)
 64 |                                         .padding(.trailing, 15)
 65 |                                         .padding(.vertical, 10)
 66 |                                 }
 67 |                                 VStack(alignment: .leading) {
 68 |                                     Text(feature.title)
 69 |                                         .fontWeight(.bold)
 70 |                                         .font(.system(size: 16))
 71 |                                     Text(feature.description)
 72 |                                         .font(.system(size: 15))
 73 |                                 }
 74 |                                 Spacer()
 75 |                             }
 76 |                         }
 77 |                         .padding(.horizontal,20)
 78 |                         .padding(.bottom, 20)
 79 |                     }
 80 |                 }
 81 |                 .padding(.bottom, 30)
 82 |                 Spacer()
 83 |                 VStack {
 84 |                     ZStack {
 85 |                         Rectangle()
 86 |                             .foregroundColor(color ?? Color.blue)
 87 |                             .cornerRadius(12)
 88 |                             .frame(height: 54)
 89 |                         Text("Continue")
 90 |                             .fontWeight(.bold)
 91 |                             .foregroundColor(.white)
 92 |                     }
 93 |                     .onDisappear() {
 94 |                         UserDefaults.standard.set(true, forKey: "OnboardingSeen")
 95 |                         closingOnboarding = true
 96 |                     }
 97 |                     .onTapGesture {
 98 |                         showingOnboarding = false
 99 |                     }
100 |                 }
101 |                 .padding(.top, 15)
102 |                 .padding(.bottom, 50)
103 |                 .padding(.horizontal,15)
104 |             }
105 |             .padding()
106 |         }
107 |     }
108 | }
109 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # OnboardingView-Swift
 2 | 
 3 | A simple onboarding screen for SwiftUI that mimicks the iOS onboarding screen
 4 | 
 5 | ![Screenshot of OnboardView example](https://adamlyttleapps.com/git/onboardingview-hero-600.jpg)
 6 | 
 7 | **Usage:**
 8 | 
 9 | ```
10 | OnboardingView(appName: "Real Estate Calculator", features: [
11 |     Feature(title: "Mortgage Repayments", description: "Easily calculate weekly, monthly and yearly repayments ", icon: "house"),
12 |     Feature(title: "Amortization", description: "Quickly view amortization for the life of the loan", icon: "chart.line.downtrend.xyaxis"),
13 |     Feature(title: "Deposit Calculator", description: "Calculate deposit based on purchase price and savings", icon: "percent"),
14 |     Feature(title: "Ad-Free Experience", description: "Thank you for downloading my app, I hope you enjoy it :-)", icon: "party.popper"),
15 | ], color: Color.blue)
16 | ```
17 | 
18 | **Customize:**
19 | 
20 | * appName: The name of your app to be displayed at the top of the onboarding screen
21 | * features: The list of features to be displayed
22 |   * title: Title of the feature
23 |   * description: Details about the feature
24 |   * icon: Any SF Symbol name
25 | * color: The color scheme to be used
26 | 
27 | **About Adam Lyttle:**
28 | 
29 | Follow me on Twitter: [twitter.com/adamlyttleapps](https://twitter.com/adamlyttleapps)
30 | 
31 | Visit my website: [adamlyttleapps.com](https://adamlyttleapps.com)
32 | 


--------------------------------------------------------------------------------