SwiftUI: List and TabView are getting over-lapped each other

Question

In my app, i am trying to display: SegmentedPicker on top of the screen, Then List, Then a simple button on bottom-right of the screen using safeAreaInset, and then a tabBar using TabView

My problem is that at bottom of the screen, List and TabView is getting over-lapped each other. Attached Screenshot at the end

Following is the code for my TabView

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                FirstView()
            }
            .tabItem {
                Label("First", systemImage: "pencil")
            }
            
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "pencil.circle.fill")
                }
        }
    }
}

Following is the code for my 1st TabView.

Look's like some issue with my Picker which is inside the VStack. Because if I remove the Picker, I don't have any issue.

struct FirstView: View {
    var firstViewPicker = ["one", "two", "three"]
    @State private var segmentSelection = 0

    var body: some View {
        VStack {
            //MARK: - Picker related stuff
            Picker("", selection: $segmentSelection) {
                ForEach(0..<firstViewPicker.count, id: \.self) { id in
                    Text(firstViewPicker[id])
                }
            }
            .pickerStyle(.segmented)
            .padding()
            
            List {
                ForEach(0..<40, id: \.self) { id in
                    Text("Row Item #\(id)")
                }
            }
            .listStyle(.grouped)                
        }
        .navigationTitle("Home")
        .navigationBarTitleDisplayMode(.inline)
        .safeAreaInset(edge: .bottom, alignment: .trailing) {
            Button(action: {
                print("Tapped")
            }, label: {
                Image(systemName: "trash.circle.fill")
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.white, .brown)
                    .font(.system(size: 50))
            })
            .padding()
            .shadow(color: .gray, radius: 5, x: 0, y: 0)
        }
    }
}

Following is the code for my 2nd TabView

struct SecondView: View {
    var body: some View {
        Text("Hello, 2nd  world!")
    }
}

Following is the screenshot where I am getting an over-lapping issue of List and TabView

Am I doing something wrong here? how can we make this work? Kindly help

FYI: I am using macOS 13.3, Xcode 14.3, Simulator 14 Pro Max with iOS 16.4

FYI: Just noticed that unable to reproduce on iPhone- 12, iPhone Simulator-14. And can able to reproduce on iPhone Simulator -14 pro, iPhone Simulator-14 pro max

Answer 1

Yes because .tabitem is getting overlapped by the Navigation stack itself. You have to provide padding there. Tried its working for me. Tested on Xcode 14.3

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationStack {
                FirstView()
            }.padding()
            .tabItem {
                Label("First", systemImage: "pencil")
            }
            
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "pencil.circle.fill")
                }
        }
    }
}