paint-brush
Navigation Bar Tutorial in iOS 18 - #30DaysOfSwiftby@vaibhavdwivedi
228 reads

Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

by VaibhavOctober 5th, 2024
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In the third post of the #30DaysOfSwift series, I am going to teach you how to make a sticky navigation bar. 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).
featured image - Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift
Vaibhav HackerNoon profile picture

Day 2: Wandering around the multiple paths 🛣️


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


The output would look something like this:


Screenshot from an app

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:
    Image description

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!