SwiftUI : Input Field Keyboard animation causing other views in tab view to animate

Question

Interaction with an input field in a view inside my TabView, is causing my other views to animate weirdly when they appear. In addition, the nav bar doesn't hide as it should.

I've established it is an input field + TabView problem because:

This issue does not occur on the simulator (the keyboard doesn't push up).
It does not occur if the user navigates to the other tab views before interacting with an input field.
It doesn't occur when I put a tab view view's content in another view and navigate to it.

I've looked into a few solutions but had no luck: Is there a way to override the keyboard animation? Is there a way to force the tab view views to "appear" when the tab view loads? Is there a way to stop other TabView sub views being impacted by changes in other TabView views

Tab iew Code

        TabView (){
        ViewA()
            .tabItem {
                Image("viewa").renderingMode(.template)
                  Text("viewa")
            }

        ViewB()
            .tabItem {
                  Image("viewb").renderingMode(.template)
                    Text("viewb")
            }
        ViewC()
            .tabItem {
              Image("viewc").renderingMode(.template)
                Text("viewc")
             
            }
        ViewD()
            .tabItem {
                Image("viewd").renderingMode(.template)
                  Text("viewd")
            }

    }

In the tab views child views, animation is applied to a VStack containing my items like so.

VStack{
items...
}.animation(.easeInOut)

This code is used to hide the nav:

        .background(NavigationConfigurator { nav in 
        nav.hidesBarsOnSwipe = true
    })

Expected behaviour:

Behaviour when interacting with an input field:

I've done some more troubleshooting. When interacting with the input field, the onAppear method for all the other views in the tab view are triggered at this point. Why is interacting with a textfield within a view causing all the other views in a tab view to appear? — rexr, Apr 23 '21 at 23:01

score 3 · Accepted Answer · answered Apr 25 '21 at 10:54

It appears this is an ongoing bug with TabView and the keyboard. The temporary fix until this is resolved is converting the VStacks to LazyVStacks so that the views do not load until necessary.

See: OnAppear calls unexpectedly when Keyboard Appears in SwiftUI

score 2 · Answer 2 · edited Apr 30 '21 at 21:44

2

There is a modifier you can use to fix this that is supported. try using this:

.ignoresSafeArea(.keyboard)

this will keep anything from moving out of the keyboard's safe area while it is moving.

edited Apr 30 '21 at 21:44

Dharman

30,962
25
85
135

answered Apr 30 '21 at 21:38

a1cd

17,884
4
8
28

I tried this, but it only prevents animation on animation on views within that Tab. All views's OnAppear are still triggered. – rexr May 01 '21 at 12:00
This works for me on Xcode 14. – MGY Oct 18 '22 at 04:53

SwiftUI : Input Field Keyboard animation causing other views in tab view to animate

2 Answers2