Navigation between SwiftUI views and UIKit Views

[ynieSalesforce]

Our app currently has a blend of UIKit views and SwiftUI views that are hosted within UIHostingViewControllers. Our current way of navigating within the SwiftUI views is by using a calling a delegate to the containing view controller for it to handle the navigation. In addition, our SwiftUI views are using TCA to handle its logic. In the features that use SwiftUI only views, we’re able to leverage stack-based navigation.

For our features that have both SwiftUI and UIKit features, are we able to leverage Swift-Navigation to observe changes in either the stack path or the destination in the state of the feature?

I did see this discussion, and wondering if there's been any updates with any additional tools either on TCA or with swift-navigation.

For example:

// Main Feature
@Reducer
struct MainMenu {
  @Reducer(state: .equatable)
  enum Path {
    case sampleNavDestination(SampleNavigation)
  }
  
  @ObservableState
  struct State: Equatable {
    var path = StackState<Path.State>()
    
    @Presents var destination: Destination.State?
  }
  
  @Reducer(state: .equatable)
  @CasePathable
  enum Destination {
    case sampleNav(SampleNavigation)
  }
  
  enum Action {
    case path(StackActionOf<Path>)
    case loadSampleStackView(String)
    case loadSampleTreeView(String)
    case destination(PresentationAction<Destination.Action>)
  }
  
  var body: some Reducer<State, Action> {
    Reduce { state, action in
      switch action {
      case let .loadSampleStackView(input):
        state.path.append(.sampleNavDestination(.init(id: input)))
        return .none
      case let .path(.element(id: id, action: .sampleNavDestination(.tap))):
        state.path.pop(from: id)
        return .none
      case .loadSampleTreeView(let input):
        state.destination = .sampleNav(.init(id: input))
        return .none
      default: return .none
      }
    }.forEach(\.path, action: \.path)
      .ifLet(\.$destination, action: \.destination)
  }
}

// SwiftUI View
struct MainMenuView: View {
  @Bindable var store: StoreOf<MainMenu>
  
  var body: some View {
    NavigationStack (
      path: $store.scope(state: \.path, action: \.path)
    ) {
        VStack(spacing: 20) {
          Button (action: {
            store.send(.loadSampleStackView("test1"))
          }, label: {
            Text("Navigate to Sample Stack View")
          }).padding(.top, 20)
          
          Button (action: {
            store.send(.loadSampleTreeView("test2"))
          }, label: {
            Text("Navigate to Sample Tree View")
          }).padding(.top, 20)
          
          Spacer()
        }.navigationDestination(
          item: $store.scope(
            state: \.destination?.sampleNav,
            action: \.destination.sampleNav)) { store in
              SampleNavigationView(store: store)
            }
    } destination: { store in
      switch store.case {
      case .sampleNavDestination(let store):
        SampleNavigationView(store: store)
      }
    }
  }
}

// Observed model
@Observable
class MainMenuModel {
  var mainMenu: StoreOf<MainMenu>
  var alert: String?
  
  init(menuState: MainMenu.State = .init(), alert: String? = nil) {
    self.mainMenu = .init(initialState: menuState) {
      MainMenu()
    }
    self.alert = alert
  }
}

// Hosting View Controller
class MainMenuHostingController: UIViewController {
  @UIBindable var model: MainMenuModel = .init()

  private lazy var menuView: UIHostingController<MainMenuView> = .init(rootView: .init(store: model.mainMenu))
  
  override func viewDidLoad() {
    super.viewDidLoad()
    addChild(menuView)
    view.addSubview(menuView.view)
    menuView.view.snp.updateConstraints { make in
      make.edges.equalTo(view)
    }
    
    // How can we observe the feature state's destination here? Or can we directly observe the changes in the feature?
    navigationDestination(item: $model.mainMenu.destination) { model in
      SampleNavigationController(model: .init(sampleNav: model))
    }

    navigationItem.title = "SwiftUI Demos"
  }
}

And then the destination code:

// Feature of the destination
@Reducer
struct SampleNavigation {
  @ObservableState
  struct State: Equatable {
    var id: String
    
    init(id: String) {
      self.id = id
    }
  }
  
  enum Action {
    case tap
  }
}

// Destination SwiftUI View
struct SampleNavigationView: View {
  
  @Bindable var store: StoreOf<SampleNavigation>
  var body: some View {
    VStack {
      Button("Id of view: \(store.id)") {
        store.send(.tap)
      }
    }
  }
}

// Observed Destination Model
@Observable
class SampleNavigationModel {
  var sampleNav: StoreOf<SampleNavigation>
  
  init(sampleNav: StoreOf<SampleNavigation>) {
    self.sampleNav = sampleNav
  }
}

// Destination View Controller
class SampleNavigationController: UIViewController {
  @UIBindable var model: SampleNavigationModel
  
  init(model: SampleNavigationModel) {
    self.model = model
    super.init(nibName: nil, bundle: nil)
  }
  
  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
  override func viewDidLoad() {
    var menuView: UIHostingController<SampleNavigationView> = .init(rootView: .init(store: model.sampleNav))
    super.viewDidLoad()
    addChild(menuView)
    view.addSubview(menuView.view)
    menuView.view.snp.updateConstraints { make in
      make.edges.equalTo(view)
    }
    
    navigationItem.title = "Sample Nav controller"
  }
}