iosswiftanimationswiftui

SwiftUI unexpected animation on appear


I have created custom TabBar.

Everything works fine, until I embed one of the tab's view in to NavigationView, than result - appearance animation of a View from very top left corner to right corner (screen with text and yellow color):

enter image description here

How tabBar is done: basically View's body created using GeometryReader VStack/Zstack:

var body: some View {
    GeometryReader { geometry in
        let height = geometry.size.height
        let width = geometry.size.width
        let bottomSafeAreaInset = geometry.safeAreaInsets.bottom
        let topSafeAreaInset = geometry.safeAreaInsets.top
        let verticalSafeAreaInset = bottomSafeAreaInset + topSafeAreaInset
        
        VStack(spacing: 0) {
            // content
            mainContentBody
                .frame(width: width, height: height - heightOfTabBar)
                .zIndex(0)
            
             // some calculation ...

            // tabBar
            Spacer(minLength: 0)
            BottomBar(barButtonItems: buttons)
                .frame(width: width, height: tabBarHeightWithOffset)
                .background(Color.gray)
                .offset(y: isMenuShown ? tabBarHeightWithOffset : 0)
                .edgesIgnoringSafeArea(.all)
                .opacity(isMenuShown ? 0 : 1)
                .tabContainerAnimation() // simple wrapper for animation with duration
            
            //... other view in ZStack
            
            // button
            ZStack {
                overlayButton
            }
            .offset(y: -initialButtonOffset + additionalOffsetForButton)
            .tabContainerAnimation(delay: 0.25)
        }
    }
}

And Code for view on tab1:

struct Tab1View: View {
    
    var body: some View {
            NavigationView {
                VStack {
                    Text("sdsd")
                    Color.orange
                }
            }
    }
}

If I remove NavigationView this effect is removed also. So my question is - why do i have this unexpected animation? what done wrong?


Solution

  • Here is fix (tested with Xcode 12.1 / iOS 14.1)

    struct Tab1View: View {
        
        var body: some View {
            GeometryReader { g in
                NavigationView {
                    VStack {
                        Text("sdsd")
                        Color.orange
                    }
                }
                .animation(.none)     // << this one !!
            }
        }
    }