SwiftUI: showing keyboard in a tab view adds a weird space below second tab view

Viewed 292

This sounds a bug in SwiftUI's NavigationView and TabView, when I have a TabView with (let's say) 2 tabs, the first tab has a TextField and the second tab has a NavigationView, follow these steps to produce the bug:

  1. show the keyboard by tapping on the text field.
  2. press on the "Return" button to hide the keyboard.
  3. go to tab 2.
  4. notice the weird bottom added space below the view, which approximately equals the height of the keyboard.

-Note1: if you do any of the following the bug won't be reproduced:

  1. once the app launches, open tab 2, return to tab 1 and show the keyboard.
  2. remove NavigationView from tab 2
  3. show the keyboard one more time in tab 1

Note2: I use GeometryReader in tab 2 to show the whole view area by a yellow color.

working code sample (just copy-paste it to try):

struct ContentView: View {
    var body: some View {
        TabView {
            View1()
                .tabItem { Text("View1") }
                .tag(1)
            
            View2()
                .tabItem { Text("View2") }
                .tag(2)
        }
    }
}

struct View1: View {
    @State private var myText = ""
    var body: some View {
        VStack {
            Text("this is view 1")
            TextField("Enter Value", text: $myText)
        }
    }
}

struct View2: View {
    var body: some View {
        NavigationView {
            GeometryReader { reader in
                Text("this is view 2")
                    .onAppear{
                        print("view 2 on appear")
                    }
            }
            .background(Color.yellow)
        }
    }
}

screenshot:

enter image description here

Is there a way to workaround this problem without having to remove the NavigationView, I tried every possible solution but couldn't a find a clue to avoid it ?

0 Answers
Related