App Settings Screen

The App Setting screen should incorporate all your app-related settings in one place. It should be easy to navigate and understand, and should be designed to match the rest of your app's design. Out of the box, we match the design of the App Settings screen to the rest of the SwiftyLaunch design system. The App Settings screen also includes settings depending on what modules you have selected during your app generation.

Account Settings (AuthKit)

If AuthKit was selected during project generation, you'll see the Account Settings panel at top of the settings screen. If logged, in, the user will be navigated to the Account Settings Screen after tapping on the Account Settings panel, otherwise, the Sign in Sheet will be shown.

General Settings

Placeholder for general app settings, does not include any settings by default.

Notifications Settings (NotifKit)

If NotifKit is selected during project generation, you'll see a NavigationLink to the Notification Settings Screen here. If the user hasn't given permission to send notifications, the app will prompt them to do so.

Appearance Settings

Appearance Settings allows the user to change the app's icon. We use this view as a demo of protecting certain features behind a premium subscription.

Privacy Settings Screen

This NavigationLink is always included, and leads the user to the PrivacyView, that contains two buttons:

• Button to show the Privacy Policy
• Button to show the Terms of Service

These buttons will open a web view in a sheet with the respective URLs. You should define these URLs in your app-wide constants.

Premium Settings Screen (InAppPurchaseKit)

This NavigationLink is only included if InAppPurchaseKit is enabled. If the user doesn't have a premium subscription, a Paywall will be shown to prompt them to buy one, otherwise the user will be navigated to the Premium Settings Screen.

Developer Links

Additionally, the App Settings screen contains a section with links to the developer's website ("About the Developer"), an option to report a problem, which will open the user's email client with a pre-filled email to the developer, a copyright notice.

All of these parameters should be set in the app-wide constants.

Deep Dive

The SettingsView is a view that contains all the above mentioned settings and accesses them via NavigationStack and NavigationLinks.

Adding Custom Settings

To create a custom setting, you can do so by designing a custom NavigationLink (Like the larger Account or Premium Settings panel) and linking it to a new view, or by reusing the SettingsRowItem view and passing the appearance information to it as parameters.

Add an entry to the SettingsPath enum

For the convenience of navigation, we use enums to navigate in the Navigation Stack. We also reuse these enums to set the style of the navigation link row.

enum SettingsPath: Hashable, Equatable {
	// ...
	case privacy
    // ...
    case myNewSetting
 
	var data: SettingsRowData {
		switch self {
            // ...
			case .privacy:
				SettingsRowData(
					iconName: "hand.raised.fill",
                    iconBackgroundColor: .blue,
                    label: "Privacy",
					analyticsDescription: "privacy"
                )
            // ...
            case .myNewSetting:
                SettingsRowData(
                    iconName: "gearshape.2.fill",
                    iconBackgroundColor: .blue,
                    label: "MySettings",
                    analyticsDescription: "my_settings"
                )
		}
	}
}

Add the Settings View as a Navigation Destination

Once the user presses a button to navigate the view, we append the corresponding SettingsPath enum to the NavigationPath. The .navigationDestination uses this information to look up which view to show.

Also, we have created a wrapper SettingsRowItem view, which only takes the SettingsPath as a parameter and displays the corresponding row, and appends it to the navigation path when pressed.

struct SettingsView: View {
    // ...
	@EnvironmentObject var db: DB
    // ...
	@State private var settingsPath = NavigationPath()
    // ...
 
	var body: some View {
		NavigationStack(path: $settingsPath) {
			List {
 
				/// Purchase Premium / Manage Premium Settings Section (InAppPurchaseKit)
				Section {
					NavigationLink(value: SettingsPath.premium) {
						PremiumRow()
					}
				}
 
                SettingsRowItem(.myNewSetting)
			}
			// ...
			.navigationDestination(for: SettingsPath.self) { setting in
				switch setting {
                    // ...
                    case .privacy:
                        PrivacyView()
                    case .myNewSetting:
                            // your settings view to navigate to
                            Text("My Settings")
                                .navigationTitle("My Settings")
                // ...
				}
			}
		}
        // ...
	}
}

Demo

Link instead of NavigationLink

If you want the settings row to navigate to a website and not to a view (like when pressing on the About the Developer row), you can use the LinkRow view instead of the SettingsRowItem view. It looks exactly the same, but navigates to a URL instead of a view.