Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

Day 2: Wandering around the multiple paths 🛣️

In the third post of #30DaysOfSwift series, I am going to teach you how to make a sticky navigation bar.

The output would look something like this:

Steps:

Create a new SwiftView file called "HomeView".
Replace the ContentView() with HomeView() in YourAppNameApp.swift (In this case, my project is called ShipiOS. Thus, file name is ShipiOSApp.swift)

var body: some Scene {
        WindowGroup {
            HomeView()
        }
    }

Lastly, add the following code in your HomeView() file:

Code:

struct HomeView: View {
    @State private var selectedTab = 0 // Track the selected tab
    let generator = UIImpactFeedbackGenerator(style: .light) // For Haptics

    @EnvironmentObject var userCommonData: CommonData

    var body: some View {
        TabView(selection: $selectedTab) {
            ContentView() // Replace with your view
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SecondView() // Replace with your view
                .tabItem {
                    Label("Chats", systemImage: "tray")
                }
                .tag(1)

            ThirdView() // Replace with your view
                .tabItem {
                    Label("Profile", systemImage: "gearshape")
                }
                .tag(2)
        }
        .accentColor(Color("AppSecondaryColor"))
        .onChange(of: selectedTab) {
            generator.impactOccurred()
        }
    }

}

Does it work? Let me know :)

Happy coding!

Blog

Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

Vaibhav Dwivedi

Steps:

Join Our Newsletter. No Spam, Only the good stuff.

Related