swiftuiduplicatesnavigationbarswiftui-tabview

SwiftUI: Why do I get duplicates in my TabView?


I am trying to add a navigation bar to my SwiftUI app using a TabView like this:

import SwiftUI

struct ContentView: View {
    @State var isLoggedIn: Bool = false
    var body: some View {
        NavigationView{
            if isLoggedIn {
                LogInPage()
            } else {
                TabView{
                    HomeScreen()
                        .tabItem {
                            Image(systemName: "house")
                            Text("Hem")
                        }
                    BookingsScreen()
                        .tabItem {
                            Image(systemName: "book")
                            Text("Bokningar")
                        }
                    ProfileScreen()
                        .tabItem {
                            Image(systemName: "person")
                            Text("Profil")
                        }
                }
            }
           
        }
    }
}

But I get two duplicates of the 'house' icon and the text "Home" under it, and I also get another icon with three dots and the text "More" under it, literally from nowhere as I haven't even mentioned anything else then a house, a book and a person. And when I press on it (the three dots) it shows a list of "person.fill" with the text "Profile" next to it. Here is an some image of how my TabView looks like and when I press on the three dots:

unexpected behaviour


Solution

  • Wrap the views that duplicate in a VStack

           TabView{
                VStack{
                    HomeScreen()
                }
                        .tabItem {
                            Image(systemName: "house")
                            Text("Hem")
                        }
                    BookingsScreen()
                        .tabItem {
                            Image(systemName: "book")
                            Text("Bokningar")
                        }
               VStack {
                    ProfileScreen()
               }
                        .tabItem {
                            Image(systemName: "person")
                            Text("Profil")
                        }
                }