Push/pop animation of NavigationView not work when nested in TabView.tabViewStyle(.page(indexDisplayMode: .never))

Question

I have this sample code:

@main
struct SwiftUITestApp: App {
    var body: some Scene {
        WindowGroup {
            VStack {
                TabView {
                    HomeView()
                }
                .tabViewStyle(.page(indexDisplayMode: .never))
            }
            CustomTabBarView()
        }
    }
}

struct CustomTabBarView: View {
    var body: some View {
        Text("CUSTOM TABBAR GO HERE")
    }
}

struct HomeView: View {
    var body: some View {
        NavigationView {
            ZStack {
                NavigationLink(destination: HomeDetailView()) {
                    Text("GO TO ORANGE")
                }
            }
            .background(.red)
        }
        .navigationViewStyle(.stack)
    }
}

struct HomeDetailView: View {
    var body: some View {
        Rectangle()
            .fill(.orange)
    }
}

I want to use my own custom tab bar UI. My intention is in every tab, I have a NavigationView of their own. Because I want to support iOS 15 so I have to use NavigationView. When launch app, the UI work as expected but when I navigate to other screen using NavigationLink, there is no animation.

I'm expecting to have animation for push/pop in NavigationView. Any insights or suggestions would be appreciated!

Answer 1

You don't need to use .tabViewStyle(.page(indexDisplayMode: .never)) modifier to achieve this, you can do this by binding the selectedTab with TabView.

struct ContentView: View {

  @State var selectedTab = 0

  var body: some View {
    ZStack(alignment: .bottom) {
        TabView(selection: $selectedTab) {
            HomeView(page: 0)
                .tag(0)
            
            HomeView(page: 1)
                .tag(1)
            
            HomeView(page: 2)
                .tag(2)
            
            HomeView(page: 3)
                .tag(3)
            
            HomeView(page: 4)
                .tag(4)
        }
        
        RoundedRectangle(cornerRadius: 25)
            .frame(width: 350, height: 70)
            .foregroundColor(.white)
            .shadow(radius: 0.8)

        HStack {
            ForEach(0..<5, id: \.self) { index in
                    Button {
                        selectedTab = index
                    } label: {
                        CustomTabItem(imageName: "cross", title: "Item \(index)", isActive: (selectedTab == index))
                    }
            }
        }
        .padding(.horizontal, 30)
        .frame(height: 70)
    }
  }

  @ViewBuilder func CustomTabItem(imageName: String, title: String, isActive: Bool) -> some View{
    VStack(alignment: .center) {
        HStack(alignment: .center) {
            Spacer()
            Image(systemName: imageName)
                .resizable()
                .renderingMode(.template)
                .foregroundColor(isActive ? .purple : .gray)
                .frame(width: 25, height: 25)
            Spacer()
        }
        Text(title)
            .foregroundColor(isActive ? .purple : .gray)
    }
  }
}

struct HomeView: View {

  var page: Int

  var body: some View {
    NavigationView {
        VStack {
            NavigationLink(destination: HomeDetailView()) {
                Text("Tab \(page) is selected")
            }
        }
        .background(.red)
    }
    .navigationViewStyle(.stack)
  }
}

struct HomeDetailView: View {
  var body: some View {
    Rectangle()
        .fill(.orange)
  }
}