Using onBack() pattern on a Component with multiple stacks.

[YektaDev]

Hi 👋

For a few days, I've been investigating the approaches to somehow map multiple child stacks' back button handling into an onBack() callback (or probably onBack(): Boolean to enable bubbling); both for a more unified API on my own (Screen) abstraction, and, for later using it to enable predictive back gesture. I'm aware that each child stack internally has a backTransformer. That's what I'm planning to use to make this possible.
The problem is, when the back transformer is invoked, it's invoked to return a new possible state for a particular stack, while having an onBack() on a Screen with multiple (in my case 2 or at most 3 (which is unlikely)) child stacks, requires direct manipulation inside the onBack() itself, because it's the scope in which all of the component's stacks are available.
I very much appreciate opinions or better, solutions on this subject.

Thanks for all the effort and active support!

[arkivanov]

Thanks for the question! Unfortunately, the onBack: Boolean pattern is not compatible with back handling on Android. See the following Twitter thread for details. And the predictive back gesture makes this requirement even stricter. Some time ago Essenty's BackPressedHandler API had onBack: Boolean, it could work on Android with some hacks (see the old Readme section with some explanation). But since Essenty v0.5.2 there is new BackHandler which follows the Android model and is compatible with the predictive back gesture.

If I understand your problem correctly, you want to be able to intercept the back button in components with (possibly) more than one stack. This may be useful to e.g. show a confirmation dialog before closing the screen. For this case, you can just register your own BackCallback after initialising all stacks (below all childStack calls). And then call set its isEnabled = true|false whether you need to intercept the back button or not. See the docs.

[YektaDev]

Oh, I wasn't aware of such a history! Thanks for the context!
As you mentioned, onBack: Boolean is off the table. That makes sense.
Now the idea is intercepting the back button for stacks in a way that also allows enabling the predictive back gesture. If I follow the approach of registering BackCallbacks, how would that be mixed with having an onBack(): Unit per Screen (consisting of +1 stacks)?
The provided example gives the perfect insight on how to use predictive back gesture with onBack() on a Component that has a single stack, but what if there are more? Doesn't having something like below, make the onBack "dynamic" again (which is what the predictive back gesture can't be)?

fun onBack() {
  if (stack2.value.backStack.isNotEmpty()) {
    nav2.pop()
  } else {
    nav1.pop()
  }
}

My guess is, to mix the two, the onBack() should be in sync with the isEnabled state and have the exact side-effect as the enabled back handler with the highest priority. Is that right?

Update: I'm starting to doubt that. Because, when the navigation gesture starts, the user can see what the end result would be, so the navigation would be already happening? This seems confusing.

[arkivanov]

Now the idea is intercepting the back button for stacks in a way that also allows enabling the predictive back gesture.

I think it's not really possible to control multiple stacks by the predictive back gesture at the same time. If your component has more than one stack, then the predictive back gesture can only control only one of them. You write as follows.

@Composable
fun RootContent(component: RootComponent) {
    Children(
        stack = rootComponent.childStack,
        animation = predictiveBackAnimation(
            backHandler = component.backHandler,
            animation = stackAnimation(fade() + scale()), // Your usual animation here
            onBack = component::onBackClicked,
        ),
    ) {
        // Omitted code
    }
}

So you use predictiveBackAnimation for the specific stack of your choice. The behaviour of using multiple predictiveBackAnimation at the same level (the same component) is undefined.

So if you have a component with multiple stacks, you can use predictiveBackAnimation at the upper level (the parent level). And in the component with multiple stacks you have two options.

1. You can specify handleBackButton = true for every stack. Stacks will be prioritised from bottom to top.
2. You can register your own BackCallback. Then subscribe to every stack via stack.subscribe {}, and update BackCallback#isEnabled property as needed (e.g. backCallback.isEnabled = stack1.backStack.isNotEmpty() || stack2.backStack.isNotEmpty()). Then when the callback is triggered, you can navigate as you want.