1

I have a basic tabview with 2 tabs. Tab 2 has a button to a modal sheet with a Page Style tabview imbedded in a Navigation Stack and added toolbar. When adding the Navigation Stack I get an unwanted white space at the bottom of the sheet view pages. I have tried using .ignoreSafeArea(edges: .bottom) in many places no solution and I'm stumped on this one. What am I missing here? How do I get rid of this unwanted white space? Is my navigation stack in the wrong place? Seems like such a simple design to be such a problem. iOS 16.1 Xcode 14.2

struct HomeView: View {

  @State private var pageIndex = 0
    var body: some View {
      TabView(selection: $pageIndex) {
        PageOne()
          .tabItem {
            Label("Page 1", systemImage: "star")
          }.tag(0)
        PageTwo()
          .tabItem {
            Label("Page 2", systemImage: "bookmark")
          }.tag(1)
      }
    }
}

struct PageOne: View {
  var body: some View {
    VStack {
      Text("Page 1")
    }
  }
}

struct PageTwo: View {
  @State private var sheetIsShowing = false
  var body: some View {
    VStack {
      Text("Page 2")
      Button("Show Sheet") {
        self.sheetIsShowing.toggle()
      }
    }
    .fullScreenCover(isPresented: $sheetIsShowing) {
      SheetView(sheetIsShowing: $sheetIsShowing)
    }
  }
}

struct SheetView: View {

  @Binding var sheetIsShowing: Bool

  var body: some View {

    NavigationStack {
      TabView {
        SheetTabView1()
        SheetTabView2()
      }
      .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
      .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
          Button {
            self.sheetIsShowing.toggle()
          } label: {
            Text("Cancel")
          }
        }
      }
    }
    .ignoresSafeArea(edges: .bottom)
  }
}

struct SheetTabView1: View {
  @State private var text1 = ""
  @State private var text2 = ""
  var body: some View {
    List {
      TextField("Enter Text", text: $text1)
      TextField("Enter Text", text: $text2)
    }
  }
}

struct SheetTabView2: View {
  @State private var text1 = ""
  @State private var text2 = ""
  var body: some View {
    List {
      TextField("Enter Text", text: $text1)
      TextField("Enter Text", text: $text2)
    }
  }
}

enter image description here

sandPitPilot
  • 39
  • 6
  • Get rid of the stack above the tab view, each tab should have its own. – lorem ipsum Dec 19 '22 at 00:16
  • @loremipsum Thanks for your reply, but can you give a bit more context. I removed the Navigation Stack above the TabView PageStyleView and added a NavStack to each SheetTabView, that didn't work and resulted in an overlay of the Navigation Bar on top of the text fields. As well I tried instead adding the NavStack to the `fullScreenCover(_: )` call on SheetView, that gave the right view but still there is white space at the bottom. – sandPitPilot Dec 19 '22 at 16:12
  • I've dealt with issues like this one before. My take is to just f it, save yourself hours of frustration and simply implement it in UIKit. – Oscar Apeland Dec 19 '22 at 23:47

1 Answers1

0

The problem here is the tabViewStyle view modifier. If you get rid of it, you'll get rid of the white space.

Alex Luque
  • 123
  • 2
  • 6