Greetings,

I've made a View (HistoricalView) that displays other views based on the selection of a Picker with an Animation. That Animation works fine on that View.

Here is how it looks like:

However, when I use the main View (ContentView), which contains a custom TabView of sorts, the Animation does not work anymore.

Here is how it looks like:

Here is the code for it, with all the views if you need it.

ContentView

import SwiftUI

struct ContentView: View {
    @ObservedObject var router = ViewRouterTabBarView()
    let tabItemsPadding: CGFloat = 2

    var body: some View {
        ZStack(alignment: .bottom) {
            VStack {
                Spacer()

                router.view

                Spacer()
                HStack {
                    TabItem(viewModel: .home, router: router)
                        .padding(tabItemsPadding)
                    TabItem(viewModel: .history, router: router)
                        .padding(tabItemsPadding)
                }
                //                .frame(height: UIScreen.main.bounds.height / 10)
                .frame(height: 75)
                .frame(maxWidth: .infinity)
                .padding(.horizontal, 20)
                .padding(.bottom, 10)
            }
        } // end ZStack
        .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct TabItem: View {
    let viewModel: TabBarViewModel
    @ObservedObject var router: ViewRouterTabBarView
    var body: some View {

        Button(action: {
            withAnimation() {
                router.currentItem = viewModel
            }
        }) {
            VStack {
                Image(systemName: viewModel.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: router.currentItem == viewModel.self ? 30 : 20, height: router.currentItem == viewModel.self ? 30 : 20)
                    .frame(maxWidth: .infinity)
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(router.currentItem == viewModel.self ? .orange:  .gray, router.currentItem == viewModel.self ? .blue : .gray)
                Text(viewModel.tabLabel)
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .font(router.currentItem == viewModel.self ? .footnote : .caption2)
            }
            .foregroundColor(router.currentItem == viewModel.self ? .orange : .gray)
        }
        .padding(.top, -10)
        .offset(y: router.currentItem == viewModel.self ? -20 : 0)
    }
}

class ViewRouterTabBarView: ObservableObject {
    @Published var currentItem: TabBarViewModel = .home

    var view: some View { return currentItem.view }
}

enum TabBarViewModel: Int, CaseIterable {
    case home
    case history

    var imageName: String {
        switch self {
        case .home: return "homekit" //"house.fill"
        case .history: return "calendar.badge.clock"
        }
    }

    var tabLabel: String {
        switch self {
        case .home: return "Home"
        case .history: return "History"
        }
    }

    @ViewBuilder
    var view: some View {
        switch self {
        case .home:
            NavigationView { HomeView() }
        case .history:
            NavigationView { HistoricalView() }
        }
    }
}

HomeView

import SwiftUI

struct HomeView: View {
    var body: some View {
        Text("This is HomeView")
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

HistoricalView

import SwiftUI

enum HistoryViewModel: String, CaseIterable {
    case records = "Measures"
    case weights = "Weights"
}

struct HistoricalView: View {
    @State private var segmentationSelection : HistoryViewModel = .records
    @State var showingMeasures = true
    @State var showingWeights = false

    var body: some View {
        VStack {
            Picker("", selection: $segmentationSelection) {
                ForEach(HistoryViewModel.allCases, id: \.self) { historyView in
                    Text(historyView.rawValue)
                }
            }
            .pickerStyle(.segmented)
            .padding(.horizontal, 100)
            .onChange(of: segmentationSelection) { newValue in
                showingWeights.toggle()
                showingMeasures.toggle()
            }

            .frame(height:45)
            Spacer()

            if segmentationSelection == .records {
                HistoricalRecordsView()
                    .transition(.move(edge: .leading))
                    .animation(.easeInOut(duration: 0.25), value: showingMeasures)
            } else {
                HistoricalWeightsView()
                    .transition(.move(edge: .trailing))
                    .animation(.easeInOut(duration: 0.25), value: showingWeights)
            }
        }
    }
}

struct HistoricalView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalView()
    }
}

HistoricalRecordsView

import SwiftUI

struct HistoricalRecordsView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This is HistoricalRecordsView")
            Spacer()
        }
    }
}

struct HistoricalRecordsView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalRecordsView()
    }
}

HistoricalWeightsView

import SwiftUI

struct HistoricalWeightsView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("This is HistoricalWeightsView")
            Spacer()
        }
    }
}

struct HistoricalWeightsView_Previews: PreviewProvider {
    static var previews: some View {
        HistoricalWeightsView()
    }
}

Any idea what I need to update to make it work from ContentView as well?

Thank you :)

Hi @ygeras!

Thank you very much for the swift and working reply :) really appreciate it. I knew my way of displaying the views was not optimal, just couldn't think of a better way to do it.

Works like a charm now :)