TabView Interfering with Startup Screen Header Height

Viewed 43

I have a tab view within a navigation view. At startup, ContentView() sets up the tab views followed by StartUpView().

When StartUpView() is called by itself, it contains the blue reserved block at the top of the view plus a small block below that contains two buttons (one to a menu and a save button for future logic below).

When I run StartupView() from ContentView() the blue block is more than twice the size (33 mm) as when StartupView() is called directly by itself (15 mm).

Within StartUpView() I have to increase the GeometryReader percentage from 60% to 80% in order to display the two buttons. Is there any way to maintain the original height of the blue block?

What I am aiming for--This is the view when running StartupView() by itself https://i.stack.imgur.com/8kCvM.png

This is what the StartupView() looks like when called from the tab view logic. https://i.stack.imgur.com/bve7p.png

struct ContentView: View {
    @State private var selectedTab: Tabs = .home

    var body: some View {

        NavigationView {
            TabView (selection: $selectedTab) {
                StartUpView()
                    .tabItem {
                        Label("Tab A", systemImage: "a.circle.fill")
                    }.tag(Tabs.taba)

                TabBView()
                    .tabItem {
                        Label("Tab B", systemImage: "b.circle.fill")
                    }.tag(Tabs.tabb)

                TabCView()
                    .tabItem {
                        Label("Tab C", systemImage: "c.circle.fill")
                    }.tag(Tabs.tabc)

                TabDView()
                    .tabItem {
                        Label("Tab D", systemImage: "d.circle.fill")
                    }.tag(Tabs.tabd)

                TabEView()
                    .tabItem {
                        Label("Tab E", systemImage: "e.circle.fill")
                    }.tag(Tabs.tabe)
            }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}


 struct StartupView: View {
 
    var body: some View {

        NavigationView {
            GeometryReader { g in
                ZStack (alignment: .top) {
                    Color.blue
                        .frame(height: (g.safeAreaInsets.top) * 0.6, alignment: .top)
                        .ignoresSafeArea()

                        .navigationTitle("Title")

                        .toolbar {
                            ToolbarItem(placement: .navigationBarLeading) {
                                NavigationLink (destination: SettingsView()) {
                                    Image(systemName: "line.3.horizontal")
                                        .resizable()
                                        .foregroundColor(.white)
                                        .frame(width: 16, height: 16)
                                }
                            }

                            ToolbarItem(placement: .navigationBarTrailing) {
                                Button(action: {
                                    print("save tapped!")
                                }){
                                    Text("Save")
                                        .foregroundColor(.white)

                                }
                            }
                        }
                } 
            } 
        }
    }
}
1 Answers

You don't need second NavigationView inside StartUpView - there should be only one in hierarchy. And the issue is due to this second navigation view navigation bar.

So a fixed part is

 struct StartUpView: View {

    var body: some View {
//        NavigationView {          // << removed !!
        GeometryReader { g in
           // ... other code
        }
    }
}

Tested with Xcode 13.4 / iOS 15.5

Related