3

I seeing an unexpected UI issue in my SwiftUI project when I add a NavigationView inside a TabView.

Here's my code,


struct MainView: View {
    @State private var selectedTab: Int = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                ScrollView {
                    VStack {
                        ForEach(0..<30) { i in
                            Text("Hello World")
                                .padding()
                                .frame(minWidth: .zero, maxWidth: .infinity)
                        }
                    }
                }.background(Color.red)
                .navigationTitle("Home View")
            }.background(Color.green)
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                TabItem(title: "Explore", systemImage: selectedTab == 0 ? "house.fill" : "house")
            }.tag(1)
            
            ExploreView()
                .background(Color.red)
                .tabItem {
                    TabItem(title: "Explore", systemImage: selectedTab == 1 ? "safari.fill" : "safari")
                }.tag(1)
        }
    }
}

Here's my scene delegate code,


struct RootView: View {
    var body: some View {
        MainView()
    }
}

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo _: UISceneSession, options _: UIScene.ConnectionOptions) {
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            self.window = window
        }

        let host = UIHostingController(rootView: RootView())
        window?.rootViewController = host
        window?.makeKeyAndVisible()
    }
}

NavigationView-TabView-ScrollView

The height of the ScrollView(which resides inside the NavigationView) is not occupying the full screen. I tried all the tricks(padding, frame, GeometryReader, ...), but no luck. I couldn't figure out what am I doing wrong here, any help would be really appreciated.

Karthik
  • 81
  • 7
  • Can you add more info and/or complete the code so that it is self contained? My own quick test (creating Text based stubs for non-specified views like TabItem) worked as expected (no gap at bottom). Simulator versions, devices, or anything else to help others observe the issue would be helpful. – Eric Shieh Jun 20 '21 at 00:09
  • 1
    I'm having this exact issue. I'm using SwiftUI in UIKit (in an existing project). I tried both suggested answers, but neither is working for me :( – TiN Sep 05 '21 at 17:35

2 Answers2

3

Thanks for the answers and for offering to help me.

I accidentally comment UITabBar's appearance logic, which fixed that problem. I'm not sure if this is a bug in SwiftUI or I'm missing something. Anyhow, commenting this following appearance fixed the issue,

// UITabBar.appearance().isTranslucent = false   <<-- Remove this
Karthik
  • 81
  • 7
1

It is inside safe area, you need to ignore it

}.background(Color.red)
.navigationTitle("Home View")
.ignoresSafeArea()             // << here !!
Asperi
  • 228,894
  • 20
  • 464
  • 690