Navigation Stack Pops When Parent View Content Loads

[fishcharlie]

I'm trying to build a system where when the user launches the app, they are taken to a view, with a navigation bar back button to navigate back to the previous page.

So basically it looks like this:

FirstView -> SecondView

In the Navigation Stack FirstView is the root, and SecondView is pushed onto the navigation stack.

The problem is, whenever the FirstView List gets reloaded, the SecondView is popped off the navigation stack and the user is automatically navigated back to the FirstView. I want the FirstView content to load, without navigating the user back to that page.

Below I have a simple example demonstrating this behavior:

import SwiftUI
import FlowStacks

enum Pages {
	case first
	case second
}

struct FirstView: View {
	@State var items: [String]? = nil

	var body: some View {
		Group {
			if let items {
				List(items, id: \.self) {
					Text($0)
				}
			} else {
				Text("Loading")
			}
		}
		.onAppear(perform: {
			load()
		})
	}

	func load() {
		// It looks like the error occurs even without the async.
		DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
			items = ["Pasta", "Bread", "Ice Cream"]
		}
	}
}

struct SecondView: View {
	var body: some View {
		VStack {
			Text("This view should remain visible until the user taps the back button")
			Text("However, currently this view disappears after the list is loaded")
		}
	}
}

struct ContentView: View {
	@State private var routes: [Route<Pages>] = [.root(.first, embedInNavigationView: true), .push(.second)]

	var body: some View {
		Router($routes) { screen, _ in
			switch screen {
			case .first: FirstView()
			case .second: SecondView()
			}
		}
	}
}

Basically the text view should remain visible until the user taps the back button or swipes in from the edge. But the current behavior is that it navigates back to the List view after 2 seconds.

I'm not sure if this is a bug with FlowStacks, or a bug in SwiftUI, or if I'm just doing something terribly wrong.

Any advice would be greatly appreciated.

[johnpatrickmorgan]

Hmmm, that is strange behaviour, thanks for sharing @fishcharlie. I'm not too sure but think what is happening in FirstView is something like:

• Each branch of the conditional if let items is a different view with its own identity.
• Wrapping it in Group doesn't change that, as Group is transparent in terms of identity.
• When items changes from nil to non-nil, the identity of FirstView changes.
• FlowStacks has added a NavigationLink invisibly to the background of FirstView, which is initially active.
• Since the NavigationLink is attached to FirstView, when FirstView's identity changes, SwiftUI sees this NavigationLink as a new NavigationLink, and understands that the previous NavigationLink has been removed from the view tree. This causes it to become inactive and pop back.

Wrapping FirstView's content with a VStack or ZStack instead of a Group ensures that FirstView has a stable identity, and the screen does not pop.

I'm not sure if this is something FlowStacks should try to work around, e.g. by wrapping all screens in a ZStack, as this might have other unintended consequences.

[fishcharlie]

Just wanted to add on, that I did manage to come up with another workaround here which is to move the @State variable to a ObservableObject class and use @ObservedObject. I'm still not really sure why this works, but it seems like transferring ownership of the observation variable so the ownership is a different class, that seems to work? Not completely sure.

But that is hopefully another reference point for others in case they run into this same issue.