I’ve got following custom Tab header component, gist of it is that it uses observable value TabRouterState.view Based on which different titles / background colors and offset are applied. Value for “view” is an enum. I’ve omitted few properties like padding and clip shape to make example simpler, as issue does not depend on them.
import SwiftUI
struct TabHeader: View {
// Private Variables
private var activeTabView = TabRouterState.view
// Determine if introduction view is shown
private var isIntroductionView: Bool {
return activeTabView == .Introduction
}
// Get localized title
private var title: LocalizedStringKey {
switch activeTabView {
case .Home: return "title-home"
case .Fitness: return "title-fitness"
case .Nutrition: return "title-nutrition"
default: return "title-home"
}
}
// Get background color based on view
private var backgroundColor: Color {
switch activeTabView {
case .Home: return .purple
case .Fitness: return .orange
case .Nutrition: return .green
default: return .purple
}
}
// Body
var body: some View {
HStack {
Text(title)
.font(._headingSmBold)
Spacer()
}
.background(backgroundColor)
.opacity(isIntroductionView ? 0 : 1)
.offset(y: isIntroductionView ? -150 : 0)
.animation(.bouncy, value: activeTabView)
}
}
Linked is a post to reddit with same question that has a video demonstrating how this animation looks. Note, that tab is not shown correctly while in introduction view and animates just fine when going Introduction -> Home. However, when going Introduction -> (Any other non home view) it looks like title is “frozen in place” i.e. it does not animate with parents offset correctly. Not sure what causes this and why it works fine with Home (I assume something to do with it being a default returned in those switch statements?)
https://www.reddit.com/r/SwiftUI/comments/18dnphw/parents_offset_animation_not_applying_to_child




