Best approach to support TCA navigation for iOS 15 app

[Ojas-Chimane]

I have previously worked on an app with Stack based navigation for iOS 16. But the new app that I am working on requires the OS to be at a minimum of iOS 15.

I tried using the following code mentioned here - https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/treebasednavigation/
The issue I am facing is to find a good example of how I can make this work. If anyone is still supporting iOS 15 within their current TCA apps how are you formatting the navigation workflow.

@available(iOS, introduced: 13, deprecated: 16)
@available(macOS, introduced: 10.15, deprecated: 13)
@available(tvOS, introduced: 13, deprecated: 16)
@available(watchOS, introduced: 6, deprecated: 9)
extension NavigationLink {
  public init<D, C: View>(
    item: Binding<D?>,
    onNavigate: @escaping (_ isActive: Bool) -> Void,
    @ViewBuilder destination: (D) -> C,
    @ViewBuilder label: () -> Label
  ) where Destination == C? {
    self.init(
      destination: item.wrappedValue.map(destination),
      isActive: Binding(
        get: { item.wrappedValue != nil },
        set: { isActive, transaction in
          if isActive {
            onNavigate()  
          } else {
            item.transaction(transaction).wrappedValue = nil
          }
        }
      ),
      label: label
    )
  }
}

I want to migrate the following workflow to support iOS 15 with TCA. Any suggestions are welcome. @stephencelis @mbrandonw

struct LoginView: View {
    @Perception.Bindable var store: StoreOf<LoginStore>

    var body: some View {
        WithPerceptionTracking {
            NavigationStack(
                path: $store.scope(state: \.path, action: \.path)
            ) {
                VStack {
                    Text("Login")
                        
                    List {
                        HStack {
                            Text("Email")
                                .bold()
                            TextField("Enter email", text: $store.userEmail)
                                .autocapitalization(.none)
                                .multilineTextAlignment(.trailing)
                                .bold()
                        }
                        
                        HStack {
                            Text("Password")
                                .bold()
                            SecureField("Enter password", text: $store.userPassword)
                                .autocapitalization(.none)
                                .multilineTextAlignment(.trailing)
                                .bold()
                        }
                    }
                    .frame(width: 400, height: 140)
                    .scrollDisabled(true)
                    .scrollContentBackground(.hidden)
                    
                    Button {
                        store.send(.loginButtonTapped)
                    } label: {
                        formatButton(message: "Login",
                                     width: 310)
                    }
                    .buttonStyle(.borderedProminent)
                    
                }
                .sheet(isPresented: $store.isPresentingScanner) {
                    CodeScannerView(codeTypes: [.qr, .code128]) { response in
                        if case let .success(result) = response {
                            store.send(.scannedQRToken(result.string))
                        }
                    }
                }
                .alert($store.scope(state: \.alert, action: \.alert))
                .frame(maxWidth: .infinity)
                .background(
                    LinearGradient(gradient: Gradient(colors: [.black, .blue]), startPoint: .top, endPoint: .bottom)
                )
            } destination: { store in
                switch store.case {
                case let .home(store): HomeView(store: store)
                case let .printLabel(store): PrintLabelView(store: store)
                }
            }
        }
    }
}

[gcohen-dev]

I actually have the same issue,
Would be nice to have sample projects or test cases which shows how to use Perception and not only documentation.
Edit:
BTW, it's used to be something like this:

         NavigationLink(
                        destination: IfLetStore(
                            self.store.scope(state: \.home, action: LoginAction.home),
                            then: HomeView.init
                        ),
                        isActive: viewStore.binding(
                            get: { $0.home != nil },
                            send: { $0 ? .presentHome : .dismissHome }
                        )
                    ) {
                        EmptyView()
                    }

[gcohen-dev]

I have an idea of how it should work.
Make sure your reducer looks like this:

@Reducer struct SettingsFeature {
	   @ObservableState struct State: Equatable {
        @Presents var destination: Destination.State?
    }

    @Reducer(state: .equatable)
    enum Destination {
     	case terms
    }

    var body: some Reducer<State, Action> {
    	.ifLet(\.$destination, action: \.destination)
    }

}

Additionally, in the view, apply the code specified here:

        NavigationLink(
                            item: $store.scope(
                                state: \.destination?.terms,
                                action: \.destination.terms
                            )
                        ) { _ in
                            WebViewUIView(urlString: AppURLs.termsLink)
                        } label: {
                            EmptyView()
                        }

Lastly, don't forget to add these extensions:

// Backport of NavigationLink with Bindings
// Source: https://pointfreeco.github.io/swift-composable-architecture/1.8.0/documentation/composablearchitecture/treebasednavigation#Backwards-compatible-availability
// swiftlint:disable:previous line_length
@available(iOS, introduced: 13, deprecated: 16)
extension NavigationLink {
    init<D, C: View>(
        item: Binding<D?>,
        @ViewBuilder destination: (D) -> C,
        @ViewBuilder label: () -> Label
    ) where Destination == C? {
        self.init(
            destination: item.wrappedValue.map(destination),
            isActive: Binding(
                get: { item.wrappedValue != nil },
                set: { isActive, transaction in
                    if !isActive {
                        item.transaction(transaction).wrappedValue = nil
                    }
                }
            ),
            label: label
        )
    }
}

// Backport of NavigationLink with Bindings
// Slightly modified to support onTap action
// Source: https://pointfreeco.github.io/swift-composable-architecture/1.8.0/documentation/composablearchitecture/treebasednavigation#Backwards-compatible-availability
// swiftlint:disable:previous line_length
@available(iOS, introduced: 13, deprecated: 16)
extension NavigationLink {
    init<D, C: View>(
        item: Binding<D?>,
        onTap: @escaping () -> Void,
        @ViewBuilder destination: (D) -> C,
        @ViewBuilder label: () -> Label
    ) where Destination == C? {
        self.init(
            destination: item.wrappedValue.map(destination),
            isActive: Binding(
                get: { item.wrappedValue != nil },
                set: { isActive, transaction in
                    if !isActive {
                        item.transaction(transaction).wrappedValue = nil
                    } else {
                        onTap()
                    }
                }
            ),
            label: label
        )
    }
}

I have tested this setup and it appears to be working; however, I will await confirmation from @mbrandonw or @stephencelis before finalizing.

[Ojas-Chimane]

Thanks, I'll give it a try.