Handling Back Navigation in Nested NavigableCircuitContent

[shaharKeisarApps]

In our app, we've implemented nested navigation flows using NavigableCircuitContent, with a primary flow for the Home screen and a secondary, nested flow for the Profile section. We've encountered an issue where pressing the back button within the Profile flow unexpectedly navigates the user directly back to the Home screen, bypassing the Profile flow's back stack.

Basic Example

Consider a simple app structure:

• Home Screen (Root NavigableCircuitContent)
  • Profile Flow (Nested NavigableCircuitContent)
    • Profile Screen 1
    • Profile Screen 2

Note: ProfileFlow is created like screen, so we start Profile Flow like - navigator.goTo(Profile Flow)

Expected Behavior:

• Inside Profile Screen 2, pressing back should navigate to Profile Screen 1.
• From Profile Screen 1, pressing back should exit the Profile flow, returning to the Home Screen.

Current Issue:

• Pressing back from anywhere inside the Profile flow exits directly to the Home Screen.

Would like to hear how you handle nested flows:)

Code example:
in the MainActivity:

fun MainActivity.tutorialOnCreate() {
    val emailRepository = EmailRepository()
    val circuit: Circuit =
        Circuit.Builder()
            //setting here both ui and presenter factories


    setContent {
        MaterialTheme {
            val backStack = rememberSaveableBackStack { push(HomeScreen) }
            val navigator = rememberCircuitNavigator(backStack)

            CircuitCompositionLocals(circuit) {
                NavigableCircuitContent(
                    navigator = navigator,
                    backStack = backStack,
                    decoration = GestureNavigationDecoration(
                        fallback = SlideNavDecoration,
                        onBackInvoked = navigator::pop
                    )
                )
            }

        }
    }
}

Navigate to the nested flow:

class HomePresenter(
    private val navigator: Navigator,
) : Presenter<HomeScreen.State> {
    @Composable
    override fun present(): HomeScreen.State {
        return HomeScreen.State(myText) { event ->
            when (event) {
                HomeScreen.Event.GoToProfileFlow -> navigator.goTo(ProfileFlow)
            }
        }
    }
    

The nested flow:

@Composable
fun ProfileFlow(state: ProfileGraphScreen.State, modifier: Modifier = Modifier) {
    val backStack = rememberSaveableBackStack { push(ProfileScreen) }
    val navigator = rememberCircuitNavigator(backStack)
    Scaffold(
        modifier = modifier,
        topBar = { TopAppBar(title = { Text("MailFlow") }) }) { innerPadding ->
        NavigableCircuitContent(
            backStack = backStack,
            navigator = navigator,
            decoration = GestureNavigationDecoration(onBackInvoked = navigator::pop),
            modifier = Modifier.padding(innerPadding),
        )
    }
}

I just check again the documentation (https://slackhq.github.io/circuit/tutorial/),
and i saw this:
"Like with Circuit, this is usually a one-time setup in your application at its primary entry point."
is that means i should use only one NavigableCircuitContent for the whole app, if so, how should i nest flows..

[ZacSweers]

Without any code sample, it's hard to advise anything here.

[shaharKeisarApps]

@ZacSweers thanks, i have added basic code sample

[shaharKeisarApps]

@ZacSweers there was something wrong with how i set the nested NavigableCircuitContent, the behaviour now is as expected.
thanks for your seeking to help:)