Merge pull request #63 from nativeapptemplate/add-onboarding-welcome

Add welcome header to Onboarding screen

Author: dadachi

NativeAppTemplate/Constants.swift

@@ -285,6 +285,10 @@ enum Strings {
     static let email = "Email"
     static let password = "Password"
 
+    static var welcomeToApp: String {
+        "Welcome to \(Bundle.main.displayName)"
+    }
+
     static let onboardingDescription1 = "Onboarding description 1."
     static let onboardingDescription2 = "Onboarding description 2."
     static let onboardingDescription3 = "Onboarding description 3."

NativeAppTemplate/UI/App Root/OnboardingView.swift

@@ -26,6 +26,7 @@ private extension OnboardingView {
         @ViewBuilder var contentView: some View {
             VStack {
                 SwiftUI.TabView {
+                    welcomePage
                     ForEach(viewModel.onboardings) { onboarding in
                         let id = onboarding.id
                         page(
@@ -60,6 +61,31 @@ private extension OnboardingView {
             .frame(width: 256, height: 24)
     }
 
+    private var welcomePage: some View {
+        ZStack(alignment: .bottom) {
+            Image("hero")
+                .resizable()
+                .aspectRatio(contentMode: .fit)
+                .padding(.top, NativeAppTemplateConstants.Spacing.md)
+                .padding(.bottom, 192)
+
+            ZStack(alignment: .top) {
+                VStack {
+                    Text(Strings.welcomeToApp)
+                        .font(.largeTitle)
+                        .fontWeight(.bold)
+                        .multilineTextAlignment(.center)
+                        .dynamicTypeSize(DynamicTypeSize.accessibility1)
+                        .padding([.top, .horizontal])
+                        .accessibilityIdentifier("OnboardingView_welcome_staticText")
+                }
+                .background(Color.backgroundColor)
+                .frame(maxWidth: .infinity, maxHeight: 192, alignment: .top)
+            }
+            .background(Color.backgroundColor)
+        }
+    }
+
     private func page(image: String, text: String, imageOrientation: ImageOrientation) -> some View {
         ZStack(alignment: .bottom) {
             Image(image)