Revision history [back]

The method to conceal the TabBar within a SwiftUI view is by using the .edgesIgnoringSafeArea(.bottom) modifier on the view that needs to be full-screen, and then adding the TabBar as a separate view using a ZStack:

struct ContentView: View {
    var body: some View {
        ZStack {
            // Your main content here
            Color.blue

            // TabBar
            TabBar()
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

struct TabBar: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                // Your TabBar items here
                TabBarItem(icon: "house.fill", label: "Home")
                TabBarItem(icon: "person.fill", label: "Profile")
            }
            .padding(.vertical, 8)
            .padding(.horizontal, 16)
            .background(Color.white)
            .cornerRadius(20)
            .shadow(radius: 5)
            .padding(.horizontal)
        }
    }
}

struct TabBarItem: View {
    var icon: String
    var label: String

    var body: some View {
        VStack {
            Image(systemName: icon)
                .font(.system(size: 24, weight: .light))
            Text(label)
                .font(.system(size: 13, weight: .light))
        }
        .foregroundColor(.gray)
        .frame(maxWidth: .infinity)
    }
}

In this example, the main content is a blue Color, and the TabBar is a separate VStack with two TabBarItems. The TabBar is positioned at the bottom of the screen using padding, and has a white background with rounded corners and a shadow. By using ZStack to layer the views, and the .edgesIgnoringSafeArea(.bottom) modifier to make the blue Color fill the entire screen, the TabBar is concealed but still accessible.