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):
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?
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 !!
}
}
}