How to Open Different Screens from First Screen in SwiftUI

Learning SwiftUI? Awesome! One of the first things you’ll want to know is how to show different screens from your first screen. Luckily, SwiftUI makes this super easy with just a few tools. Let’s dive in.

TL;DR: In SwiftUI, you can open different screens using things like NavigationLink, sheet, and fullScreenCover. These tools let you move between views either like a push or like a pop-up. You control these with Boolean values or direct links. Super clean, super fun!

Why Different Screens?

Your app won’t be just one screen. Imagine a settings screen, a profile screen, or a details page. All of these are different screens. So, we need ways to present them.

Let’s start with the easiest one.

1. NavigationLink – Like a Push

This is great for when you want to move forward in a flow, like tapping on a list item to see details.

struct FirstScreen: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Welcome!")
                NavigationLink("Go to Second Screen", destination: SecondScreen())
            }
        }
    }
}

struct SecondScreen: View {
    var body: some View {
        Text("Hello from the second screen!")
    }
}

Add NavigationView to wrap everything. Then NavigationLink handles the push!

Fun Tip: You can use titles, images, or custom buttons with it too.

Custom Button with NavigationLink

NavigationLink(destination: SecondScreen()) {
    HStack {
        Image(systemName: "star")
        Text("Shiny Screen")
    }
}

2. Sheet – Like a Pop-Up

Sometimes, you don’t want to push, you want a floating screen. That’s when you use .sheet.

struct FirstScreen: View {
    @State private var showSheet = false

    var body: some View {
        VStack {
            Text("First Screen")
            Button("Open Sheet") {
                showSheet = true
            }
        }
        .sheet(isPresented: $showSheet) {
            SheetScreen()
        }
    }
}

struct SheetScreen: View {
    var body: some View {
        Text("This is a sheet!")
    }
}

Click the button, and boom! Sheet slides up.

Pro Tip: Use sheets for temporary screens like settings or help.

3. FullScreenCover – Just Like It Sounds

Need something that covers the whole screen? Go big with .fullScreenCover.

struct FirstScreen: View {
    @State private var showFullScreen = false

    var body: some View {
        VStack {
            Text("Welcome!")
            Button("Cover Me!") {
                showFullScreen = true
            }
        }
        .fullScreenCover(isPresented: $showFullScreen) {
            FullScreenView()
        }
    }
}

struct FullScreenView: View {
    var body: some View {
        VStack {
            Text("This is full screen!")
            Button("Dismiss") {
                // There’s no direct dismiss button,
                // You usually use environment dismiss
            }
        }
    }
}

This makes it feel like a new app screen.

How to Dismiss?

When you use sheet or full screen views, users need a way to go back. SwiftUI gives us the @Environment tool.

@Environment(\.dismiss) var dismiss

Button("Close Me") {
    dismiss()
}

Put that in your second screen view. It’ll close the sheet or full view when tapped.

4. Multiple Navigation Options

What if you want to go to different screens from one screen? Let’s say you have three buttons. One goes to Profile, one to Settings, and one to Help.

struct FirstScreen: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 20) {
                NavigationLink("Go to Profile", destination: ProfileScreen())
                NavigationLink("Go to Settings", destination: SettingsScreen())
                NavigationLink("Go to Help", destination: HelpScreen())
            }
        }
    }
}

Easy as stacking pancakes! 🥞

5. Conditional Navigation – When You Need Rules

Sometimes, you only want to show a screen if something happens, like if a user is logged in.

Use a @State variable with a controlled NavigationLink.

struct FirstScreen: View {
    @State private var goToSpecial = false

    var body: some View {
        NavigationView {
            VStack {
                Button("Unlock Surprise") {
                    goToSpecial = true
                }

                NavigationLink(
                    destination: SpecialScreen(),
                    isActive: $goToSpecial
                ) {
                    EmptyView()
                }
            }
        }
    }
}

This is called “programmatic navigation.” Useful for logins, payments, or anything fancy.

6. What About Tabs?

Want different screens but all part of a main layout? Use TabView.

TabView {
    FirstScreen()
        .tabItem {
            Label("Home", systemImage: "house")
        }

    ProfileScreen()
        .tabItem {
            Label("Profile", systemImage: "person")
        }

    SettingsScreen()
        .tabItem {
            Label("Settings", systemImage: "gear")
        }
}

Each tab is a whole new screen. Simple!

Quick Tips & Tricks

• NavigationView only needed once, at the root level.
• Use @State for controlling sheet visibility.
• Use @Environment(\.dismiss) for going back.
• Use NavigationLink for simple stacking screens.

More Fun with NavigationStack

In iOS 16 and later, use NavigationStack instead of NavigationView.

NavigationStack {
    NavigationLink("Next", destination: SecondScreen())
}

Stacks give you more power and control, especially for advanced navigation with paths.

Conclusion

Look at you! You now know how to open all kinds of screens from the first one.

• Need to go forward in a flow? Use NavigationLink.
• Need a pop-up? Use sheet.
• Need full-screen? Use fullScreenCover.
• Need tabs? Use TabView.

SwiftUI makes it fun to mix and match. Try things out and see what works best for your app.

Happy coding! 🚀