Switch rootView inside Coordinator?

[lmw4051]

I wondered how to switch rootView before login and after login?

The navigation flow I have now is:
Onboarding Flow (Before Login)
A -> B -> C

Home Flow (After Login)
'D -> E -> F'

The example code at the moment only split the coordinators in different tabs, but how to compose multiple coordinators with 1 single flow?

Updated:
At the moment, I came up with a solution by checking the computed property. And once either OnboardingCoordinator has either push or pop behavior then will trigger the flow property to be refreshed in AppState and causing AppView to switch which view will be presented.

enum AppFlow: String {
  case onboarding
  case home
}

var flow: AppFlow {
    if TokenManager.getAuthToken() != nil {
      return .home
    } else {
      return .onboarding
    }    
  }

struct AppView: View {
  let store: Store<AppState, AppAction>
  
  var body: some View {
    WithViewStore(self.store) { viewStore in
      switch viewStore.flow {
      case .onboarding:
        OnboardingCoordinatorView(
          store: store.scope(
            state: \AppState.onboardingCoordinator,
            action: AppAction.onboardingCoordinator
          )
        )
      case .home:
        CoordinatorView(
          store: store.scope(
            state: \AppState.coordinator,
            action: AppAction.coordinator
          )
        )
      }
    }
  }
}

[johnpatrickmorgan]

Hi @lmw4051! I was about to suggest the same solution you've reached. You should also be able to use .transition modifiers to animate the change as desired too. Are you satisfied with that solution or is there an issue still?

[lmw4051]

Hi @lmw4051! I was about to suggest the same solution you've reached. You should also be able to use .transition modifiers to animate the change as desired too. Are you satisfied with that solution or is there an issue still?

I lost the push and pop animation effect when using the solution above.

Can you show me where and how to add the .transition modifiers in order to generate same push pop effect?

For example:
After Login -> Transition to Home
Home Logout -> Transition to Login

Thanks in advance.

[johnpatrickmorgan]

I have an example from vanilla FlowStacks to hand. You should be able to do something similar:

struct MainCoordinator: View {
  enum Flow {
    case onboarding
    case home
  }
  
  @State var flow: Flow = .onboarding
    
  var body: some View {
    VStack {
      switch flow {
      case .onboarding:
        OnboardingCoordinator(onLogin: showHome)
          .transition(.slide)
      case .home:
        HomeCoordinator(onLogout: showOnboarding)
          .transition(.slide)
      }
    }
  }

  func showHome() {
    withAnimation {
      flow = .home
    }
  }

  func showOnboarding() {
    withAnimation {
      flow = .onboarding
    }
  }
}

[lmw4051]

I have an example from vanilla FlowStacks to hand. You should be able to do something similar:

struct MainCoordinator: View {
  enum Flow {
    case onboarding
    case home
  }
  
  @State var flow: Flow = .onboarding
    
  var body: some View {
    VStack {
      switch flow {
      case .onboarding:
        OnboardingCoordinator(onLogin: showHome)
          .transition(.slide)
      case .home:
        HomeCoordinator(onLogout: showOnboarding)
          .transition(.slide)
      }
    }
  }

  func showHome() {
    withAnimation {
      flow = .home
    }
  }

  func showOnboarding() {
    withAnimation {
      flow = .onboarding
    }
  }
}

Thanks so much for your help.