Hello, I'm have a NavHost that contains multiple `...

# compose

[Raed Ghazal]

Hello, I'm have a NavHost that contains multiple NavGraphBuilder.navigation and each one contains multiple inner screens, and I can navigate between `navigation`s using a bottom sheet,

the issue is, when ever I have a sub screen open in one of the tabs, and i move to another tab and go back to the first tab, the enterTransition of the screen runs again instead of the enterTransition of the parent tab

I noticed a similar behavior in now in Android project, check the video to understand the issue better

screen-20250104-143953.mp4

[Raed Ghazal]

NavHost(
    modifier = Modifier.fillMaxSize(),
    navController = navController,
    startDestination = MainScreenRoute.HomeNavHost,
    enterTransition = { fadeIn(animationSpec = tween(200)) },
    exitTransition = { fadeOut(animationSpec = tween(200)) },
) {
    // todo find a solution for the sliding animation when we're back to the tab
    navigation<MainScreenRoute.HomeNavHost>(startDestination = MainScreenRoute.Home) {
        composable<MainScreenRoute.Home> {
            HomeScreen()
        }

        composable<MainScreenRoute.ReceiptDetails>(
            enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween()) },
            popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End, tween()) },
            popEnterTransition = { EnterTransition.None },
            exitTransition = { ExitTransition.None },
        ) {
            ReceiptDetailsScreen()
        }
    }
}

[Raed Ghazal]

here is how my code looks like, when I switch between tabs, even if ReceiptDetails screen is open, I expect the parent NavHost transitions to run and not the inner composable transition

[Raed Ghazal]

hey guys, any idea on how to fix this?

[calidion]

I only use state to switch pages. nav host , nav controllers are just adding complexity.

[Raed Ghazal]

you don't use navigation library?

[calidion]

enum class PageType(i: Int) {
    ChatMain(0x10),
    ContactMain(0x20),
    AppMain(0x30),
    MineMain(0x40),
    MineProfile(0x41),
    MineKey(0x42),
    MineServerIP(0x43),
    MineServerPort (0x44)
}

[calidion]

so far there is not navigation component used.

[calidion]

var selectedTab by remember { mutableStateOf(TabType.Chats) }
    var stacked by remember { mutableStateOf(ContentType.NonStacked) }
    var page by remember { mutableStateOf(PageType.MineMain) }

    Column(modifier = Modifier.fillMaxSize()) {
        TopBar(
            selectedTab = selectedTab,
            stacked = stacked,
            page = page,
            updater = { vPage, vStacked ->
                stacked = vStacked
                page = vPage
            }
        )
        Tabs(
            selectedTab = selectedTab,
            modifier = Modifier.weight(1f),
            page = page,
            updater = { vPage, vStacked ->
                stacked = vStacked
                page = vPage
            }
        )
        BottomBar(
            selectedTab = selectedTab,
            onClickTab = {
                selectedTab = it
                stacked = ContentType.NonStacked
                page = when(selectedTab) {
                    TabType.Mine -> PageType.MineMain
                    TabType.Chats -> PageType.ChatMain
                    TabType.Contacts -> PageType.ContactMain
                    TabType.Apps -> PageType.AppMain
                }
            },
        )
    }

[calidion]

all pages are routed by state value

[Raed Ghazal]

oh, but this is not really good, no? 😅

what happens to backstack, how do you know which pages comes before which?

[calidion]

if you want to use backstack, just add a stack state.

[calidion]

It now can handle back stack properly.

[calidion]

The state know where are the page now and previous state

[B Kidiga]

I think you should try to hoist the navigation logic, by this
App() -> entry point
in App -> Check condition then pass the respective graph

[calidion]

I think navhost and navcontroller are bad designed and confusing. Stateful controlling over pages is better and intuitive, and you don't have to introduce nav host and nav controller.