Working with the Tab View in SwiftUI

In this SwiftUI tutorial, we will learn how to create a tab bar interface using TabView in Xcode 13. A view that switches between multiple child views using interactive user interface elements.

SwiftUI TabBarView,Tabview,bottomrabview

Create a TabView user interface-

To create a user interface with tabs, place views in a `TabView` and apply

the View/tabItem(_:) modifier to the contents of each tab. On iOS, you

can also use one of the badge modifiers, like View/badge(_:) to assign a badge to each of the tabs. The following creates a tab view with

three tabs, the first of which has a badge:

To display more tabs, you just need to add the child views inside the TabView like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                Text("Home Tab")
                    .tabItem {
                        Image(systemName: "house.fill")
                Text("Another Tab")
                    .tabItem {
                        Image(systemName: "star.fill")
                    .tabItem {
                        Image(systemName: "")

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {

Create a Child View as below code-

struct FirstView: View {
    var body: some View {
            List(1...60, id: \.self) { index in
                    destination: Text("Item #\(index) Details"),
                    label: {
                            .font(.system(size: 20, weight: .bold, design: .rounded))
            }.navigationBarTitle("AppCodeZip", displayMode: .inline)

Post a Comment