Multiple backstack support

[erawhctim]

I've been poking around with Circuit & the sample app and I was curious what it would take to support multiple backstacks (so each bottom navigation item could "own" its own backstack and swap between them on navigation item clicks).

I built out a small edit to the sample app on my fork (branch link here) to try and enable this. Much to my surprise, it was fairly straightforward! I'm sure there are holes in my solution, and edge cases that need to be tested to make it foolproof, but figured I'd share here in case anyone was interested in the multi-backstack concept 🙂

Note: this is just meant for demonstration purposes; I won't be opening a PR for this

• Here's a link to my branch
• Here's a diff/comparison view for quick reference

Here's a small screen recording of the sample in action:

circuit-sample-multibackstack.mp4

High-level summary of the changes:

• Update the top-level UI content in MainActivity to a plain CircuitContent
  • The "root" content doesn't need it's own backstack in this scenario
• Update HomeContent to use a NavigableCircuitContent instead, and create a list of SaveableBackStacks matching the list of bottom navigation items
  • The core responsibility/behavior of the backstack remains the same, and there's only ever one "active" backstack being used at a time. We just need to save/restore the backstacks and swap between them in response to bottom nav. selection events.
  • I had to wrap the rememberCircuitNavigator call in a key() (based on the bottom nav. item index), otherwise the same Navigator and backstack would be re-used across bottom nav. items.
    • I'm curious if this the right way to identify "remembered" state like this 🤔
• Add some dummy code to the About content to add a button + Event so we can push new About screens onto the stack
  • This was just a low-effort way to validate the backstack swapping/behavior.
  • This behavior is kinda hard to notice in the video (below), since the About screens are identical in their appearance, but you can see multiple "add to backstack" taps, and multiple back button presses if you look closely.

Some closing thoughts/questions:

• I have no idea if this is anywhere near an "ideal" implementation 😂 I'm still learning Compose, like most of us, so if anyone sees obvious mistakes or has suggestions for improvements, I'd love to hear them!
• Originally I thought I would have to build a new NavigatorImpl that accepted multiple backstacks (and managed the "active" state itself), which didn't really make complete sense in my head (how would the "active" backstack state get updated?).
  • Once I pivoted to the idea of maintaining the backstacks at a higher scope and simply swapping them out with one another, the implementation seemed much more straightforward.
• Is this "multiple backstack" use case a scenario you've thought about before? If so, is there anything you'd like to see (or plan to add) to Circuit internally to support this, or do you think the public API offers enough as-is to let consumers build this themselves?

Circuit is really enjoyable to use and build upon, even in its early state 🎉
Congrats to the team for building something so polished (and huge shoutout to y'all building this in the open for others to learn from 🙏🏻)

[clarksandholtz]

Multiple backstack support would be awesome! This is really impressive @erawhctim! Would love to hear from the Circuit team if there are plans to add something like this or if it would be possible to get feedback on your solution to move it forward.

[ZacSweers]

Answered a bit here #368 (comment). Is there anything specific you'd want to see in circuit's core APIs to enable this? I think a testament to their current extensibility is that @erawhctim didn't have to make any changes to them for his prototype.

[erawhctim]

Agreed! Adding some kind of "official" multi-backstack API to circuit doesn't really feel necessary (though I could see this existing as a sample).

I'd be happy to update my branch with the latest version and put a small sample up in PR if you guys think that could be valuable?

[ZacSweers]

Thanks but I think that sample doesn't need it for now, happy to point at this discussion as a reference

[ZacSweers]

Thanks for sharing! Sorry for the delay in getting to this, turned out I didn't have any notifications for discussions.

I think the way you've implemented it is more or less how we'd recommend it, and it's by design that it's easy to layer :). The only thing I suspect you'd need to tweak (and this is more of a compose thing) is this line, just to remember the final mapping.

[erawhctim]

Makes sense. My branch is mega out-of-date, so once I get around to updating it I'll add in that change, thanks!

[OSemenovBoyarka]

@erawhctim, thanks for sharing this! I've tried to implement same approach, but faced an issue with state management.
Backstack state is persisted fine, but each screen state does not persist during tabs switching.

E.g. in the star sample if I select some pet, swipe through photos, or scroll down and then switch bottom tabs back and forth, the screen state is reset. Is there any way to persist it?

@ZacSweers any ideas?

[erawhctim]

As of version 0.19, Circuit supports multiple backstacks out-of-the-box.

Anyone looking for multiple back stack support can just upgrade to v0.19, and ignore everything else here 🙂