DEV Community

Cover image for Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi Subscriber

Posted on • Edited on

Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

#swift #swiftui #beginners #tutorial

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:

Image description

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() } }
Enter fullscreen mode Exit fullscreen mode
  • 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() } } }
Enter fullscreen mode Exit fullscreen mode

Does it work? Let me know :)

Happy coding!

Top comments (0)