What's the best way to use FlowStacks in a TabView environment?

[fishcharlie]

Basically I have a bunch of tabs in a TabView, and my goal is to implement FlowStacks to make deep linking easier.

Each tab is a different page that could be represented in FlowStacks. But not sure if this is the right approach. I could implement a new Router for each tab, but that feels like a lot of repetitive code especially when some tabs might want to reuse views from other tabs eventually as the user navigates through the content.

What is the recommended approach here?

[johnpatrickmorgan]

Thanks for your question @fishcharlie! I would definitely recommend using a separate Router for each tab. The alternative I guess is having a single Router that has the TabView as its root screen? I suppose that should work, but the tab bar would disappear whenever you push a new screen, and I don't think that's the idiomatic way navigation works on iOS.

[johnpatrickmorgan]

The example app has a basic implementation of deep-linking too.

[fishcharlie]

@johnpatrickmorgan Thanks for the quick reply.

Do you have an example for using a separate Router for each tab? Is there also a way to have a separate Router for each tab, but the same page enum collection so I can reuse views across tabs?

---

On a different note: if you have a GitHub sponsor or donation link, let me know! Really appreciate your work here, and want to contribute what I can to help further development and support of this package.

[johnpatrickmorgan]

The example app has a TabView, and each of the tabs is a coordinator view with its own Router:

FlowStacks/FlowStacksApp/Shared/FlowStacksApp.swift

Lines 17 to 33 in 0c5414b

	TabView(selection: $selectedTab) {
	ParentCoordinator()
	.tabItem { Text("Parent") }
	.tag(Tab.parentCoordinator)
	NumberCoordinator()
	.tabItem { Text("Numbers") }
	.tag(Tab.numberCoordinator)
	VMCoordinator()
	.tabItem { Text("VMs") }
	.tag(Tab.vmCoordinator)
	BindingCoordinator()
	.tabItem { Text("Binding") }
	.tag(Tab.bindingCoordinator)
	ShowingCoordinator()
	.tabItem { Text("Showing") }
	.tag(Tab.showingCoordinator)
	}.onOpenURL { url in

I suppose if you wanted to share the same screen enum across them all, then you could avoid duplicating the switch statement by refactoring it into its own view, which could then be reused in each of your tabs e.g.:

struct HomeTab: View {
  var routes: [Route<Screen>] = [.root(.home)]

  var body: some View {
    Router($routes) { screen, _ in
      ScreenView(screen: screen)
    }
  }
}

struct ScreenView: View {
  let screen: Screen

  var body: some View {
    switch screen {
    case .home:
      HomeView()
    case .numberList(let range):
      NumberListView(range: range)
    case .numberDetail(let number):
      NumberDetailView(number: number)
    }
  }
}

I don't have any sponsorship set up thanks. I'll consider adding it, but I'm also just happy to know my work has been useful, so thanks for your appreciation. 😄