Zoom navigation transitions for tabViewBottomAccessory are not working in SwiftUI with ObservableObject or Observable

Question

Created 3d

Replies 0

Boosts 0

Participants 1

The zoom navigation transition with matchedTransitionSource in tabViewBottomAccessory does not work when a Published var in an ObservableObjector Observable gets changed.

Here is an minimal reproducible example with ObservableObject:

import SwiftUI
import Combine

private final class ViewModel: ObservableObject {
    @Published var isPresented = false
}

struct ContentView: View {
    @Namespace private var namespace
    
    @StateObject private var viewModel = ViewModel()
//    @State private var isPresented = false
    
    var body: some View {
        TabView {
            Button {
                viewModel.isPresented = true
            } label: {
                Text("Start")
            }
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }

            Text("Search")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Search")
                }

            Text("Profile")
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
        }
        .sheet(isPresented: $viewModel.isPresented) {
            Text("Sheet")
                .presentationDragIndicator(.visible)
                .navigationTransition(.zoom(sourceID: "tabViewBottomAccessoryTransition", in: namespace))
        }
        .tabViewBottomAccessory {
            Button {
                viewModel.isPresented = true
            } label: {
                Text("BottomAccessory")
            }
            .matchedTransitionSource(id: "tabViewBottomAccessoryTransition", in: namespace)
        }
    }
}

However, when using only a State property everything works:

import SwiftUI
import Combine

private final class ViewModel: ObservableObject {
    @Published var isPresented = false
}

struct ContentView: View {
    @Namespace private var namespace
    
    //    @StateObject private var viewModel = ViewModel()
    @State private var isPresented = false
    
    var body: some View {
        TabView {
            Button {
                isPresented = true
            } label: {
                Text("Start")
            }
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
            
            Text("Search")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Search")
                }
            
            Text("Profile")
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
        }
        .sheet(isPresented: $isPresented) {
            Text("Sheet")
                .presentationDragIndicator(.visible)
                .navigationTransition(.zoom(sourceID: "tabViewBottomAccessoryTransition", in: namespace))
        }
        .tabViewBottomAccessory {
            Button {
                isPresented = true
            } label: {
                Text("BottomAccessory")
            }
            .matchedTransitionSource(id: "tabViewBottomAccessoryTransition", in: namespace)
        }
    }
}

Boost