SwiftUI TabView not working, it just shows text off screen

Question

I am trying to get a TabView in SwiftUI, but it just doesn't work... My code is here:

import SwiftUI
import SDWebImage
import HalfModal

struct ContentView: View {
    
    @State var launches: [Launch] = []
    //    @State private var showingAlert = false
    @State private var show_modal: Bool = false
    @State private var mName: String = ""
    @State private var mDate: String = ""
    @State private var rID: String = ""
    @State private var mImg: String = ""
    @State private var mDesc: String = ""
    @State private var showingHalfModal: Bool = false
    @State private var choices = ["Launches", "Rockets"]
    @State private var choice = 0
    
    var rocketNames = ["5e9d0d95eda69955f709d1eb": "Falcon 1", "5e9d0d95eda69973a809d1ec": "Falcon 9", "5e9d0d95eda69974db09d1ed": "Falcon Heavy", "5e9d0d96eda699382d09d1ee": "Starship"]
    
    init() {
        UITableView.appearance().separatorStyle = .none
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().backgroundColor = .clear
        
    }
    
    var body: some View {
        //        Spacer()
        //            .frame(height: 100)
        TabView {
            Group {
                NavigationView {
                    ZStack {
                        VStack {
                            //                    Spacer()
                            //                        .frame(height: 10)
                            //                    Text("SpaceX launch list")
                            //                        .font(.largeTitle)
                            Spacer()
                                .frame(height: 1)
                                .navigationBarTitle("Launches")
                            
                            
                            
                            List {
                                
                                ForEach(launches, id: .id) { launch in
                                    //                        Text("image")
                                    //                        Image("imagenotfound")
                                    Button(action: {
                                        self.mName = launch.name
                                        self.mDate = Date(timeIntervalSince1970: launch.date_unix).getFormattedDate(format: "dd/MM/yyyy HH:mm:ss")
                                        self.rID = launch.rocket
                                        self.mImg = launch.links.patch.missionPatch ?? "null"
                                        self.mDesc = launch.details ?? "No description"
                                        //                    sleep(1)
                                        self.show_modal.toggle()
                                        withAnimation {
                                            self.showingHalfModal = true
                                        }
                                    }) {
                                        HStack {
                                            //                            Image("imagenotfound")
                                            //                                .resizable()
                                            //                                .frame(width: 50, height: 50)
                                            URLimageView(urlString: launch.links.patch.missionPatch)
                                            //                                .frame(width: 50, height: 50)
                                            Group {
                                                Text(launch.name)
                                                    .font(.system(size: 23))
                                                    .frame(maxWidth: .infinity, alignment: .leading)
                                                    .fixedSize(horizontal: false, vertical: true)
                                                Text(Date(timeIntervalSince1970: launch.date_unix).getFormattedDate(format: "dd/MM/yyyy HH:mm:ss"))
                                                    .font(.system(size: 11.5))
                                                    .foregroundColor(Color.gray)
                                                    .frame(maxWidth: .infinity, alignment: .leading)
                                                    .fixedSize(horizontal: false, vertical: true)
                                                Spacer()
                                            }
                                        }
                                    }
                                    .buttonStyle(PlainButtonStyle())
                                    //                        .sheet(isPresented: self.$show_modal) {
                                    //                            //                    ModalView(mission: launch.name, date: Date(timeIntervalSince1970: launch.date_unix).getFormattedDate(format: "dd/MM/yyyy HH:mm:ss"), rocket: launch.rocket)
                                    //                            ModalView(mission: mName, date: mDate, rocket: rID)
                                    //                        }
                                }
                            }.onAppear {
                                apiCall().getUsers{ (launches) in self.launches = launches}
                            }.listStyle(SidebarListStyle())
                            .frame(alignment: .center)
                        }
                        if showingHalfModal {
                            HalfModalView(content: AnyView(VStack(alignment: .leading) {
                                Text(mDesc)
                                    .padding()
                                
                            }), header: AnyView(HStack {
                                                    URLimageView(urlString: self.mImg)
                                                    VStack(alignment: .leading) {
                                                        Text(self.mName)
                                                        Text(self.mDate)
                                                            .font(.system(size: 10))
                                                            .foregroundColor(Color.gray)
                                                    }}), isPresented: $showingHalfModal)
                        }
                    }
                }
            }
        }
        .tabItem {
            Image(systemName: "flame")
            Text("Launches")
        }
        Text("rockets")
            .tabItem {
                Image(systemName: "paperplane")
                Text("Rockets")
            }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        
    }
}

extension Date {
    func getFormattedDate(format: String) -> String {
        let dateformat = DateFormatter()
        dateformat.dateFormat = format
        return dateformat.string(from: self)
    }
}

I have tried following numerous tutorials that show that they get successful results, but mine still doesn't work...

Screenshot of issue:

It should show 2 tabs: Launches and Rockets... Any ideas on how to get it working?

question from:https://stackoverflow.com/questions/65832653/swiftui-tabview-not-working-it-just-shows-text-off-screen

Answer 1

Your view is too complex and you misplaced some subviews. If you clear the body a little bit, you can see that you attached tabItem modifiers outside the TabView:

var body: some View {
    TabView {
        Group {
            NavigationView {
                // ...
            }
        }
    }
    .tabItem {
        Image(systemName: "flame")
        Text("Launches")
    }
    Text("rockets")
        .tabItem {
            Image(systemName: "paperplane")
            Text("Rockets")
        }
}

Instead, try the following structure:

var body: some View {
    TabView {
        NavigationView {
            // ...
        }
        .tabItem {
            Image(systemName: "flame")
            Text("Launches")
        }
        Text("rockets")
            .tabItem {
                Image(systemName: "paperplane")
                Text("Rockets")
            }
    }
}

Note: I recommend you extract some views as subviews. Some examples can be found here:

• SwiftUI - Can I share functions with an extracted subview?