Using NavigableCircuitContent for navigation

[eyedol]

I'm using NavigableCircuitContent to handle navigation and the content of a screen.

I have a Home Screen that has a bottom NavigationBar with about 3 NavigationBarItems. One of the NavigationBarItem shows a screen with a list. The List Screen when an item is selected from it, navigates to its Detail Screen. This Detail Screen also has a bottom NavigationBar with NavigationBarItems. What I have seen is that when using NavigableCircuitContent and you navigate to the Detail Screen, the Home Screen's bottom NavigationBar as well as the one from the Detail Screen both show. The Detail Screen's bottom NavigationBar is shown on top of the Home Screen. What I have noticed, if you use the simple CircuitContent you don't experience this issue. You only see the Detail Screen's bottom NavigationBar. It behaves like the Detail Screen has replaced the Home Screen, which is the expected behavior I want from using NavigableCircuitContent.

I modified the sample Star app 1 and I was able to reproduce it there as well. Not sure if I'm using NavigableCircuitContent the wrong way or if I may have encountered a bug. Is this an issue?

Code snippet of the modified version of the Star sample app to demonstrate the issue

@CircuitInject(screen = HomeScreen::class, scope = AppScope::class)
@Composable
fun HomeContent(state: HomeScreen.State, modifier: Modifier = Modifier) {
var contentComposed by rememberRetained { mutableStateOf(false) }
Scaffold(
  modifier = modifier.fillMaxWidth(),
  contentWindowInsets = WindowInsets(0, 0, 0, 0),
  containerColor = Color.Transparent,
  bottomBar = {
    StarTheme(useDarkTheme = true) {
      BottomNavigationBar(selectedIndex = state.selectedIndex) { index ->
        state.eventSink(ClickNavItem(index))
      }
    }
  }
) { paddingValues ->
  contentComposed = true
  val screen = state.navItems[state.selectedIndex].screen

  val backstack = rememberSaveableBackStack { push(screen) }
  val navigator = rememberCircuitNavigator(backstack)
    NavigableCircuitContent(
    backstack = backstack ,
    navigator = navigator,
    modifier = Modifier
      .padding(paddingValues)
      .fillMaxHeight(),
  )
}
ReportDrawnWhen { contentComposed }
}

Sample video:

Screen_recording_20230928_144331.mp4

[ZacSweers]

I've been reading this a few times and I'm still not exactly sure I understand what the question is 😅. In your change, you placed the navigable content within the scaffold, so of course it wouldn't replace the outer UI's navigation bar. Am I missing something?

[eyedol]

Oops my bad. Oh I meant with the same configuration when I use NavigableCircuitContent instead of CircuitContent the outer UI's navigation bar is not replaced. The original sample app uses CircuitContent which is within the scaffold but it replaces the outer UI's navigation bar.

I was expecting the NavigableCircuitContent to behave the same way as CircuitContent with this use case. From your response does it mean because NavigableCircuitContent is used inside the scaffold, the outer UI's navigation bar won't be replaced?

[ZacSweers]

Yeah that's correct. The nested content in this case doesn't know anything about the outer scaffold or its bottom bar

[eyedol]

Okay got it. CircuitContent is the way to go in this case then. Thanks for confirming this.