Using NavController and BottomNavigation in one app

Question

I am developing an app which has a beginning splash screen and then goes to homescreen page which has a bottomnavigation with two tabs, Home and About. When user clicks on one card in home page, app must navigate to details about that card where bottomnavigation is not needed anymore and when clicks on About tab, navigates to About and BottomNavigation is still shown. Inhome page everything is shown by composables. I have made it with to navhostcontrollers and it is working correctly but is it a correct approach or there are better ways to handle such an issue?

I have explained what I have tried

this is my main activity

    ScreenNavGraph(navController = rememberNavController()) 

which calls

    @Composable
    fun ScreenNavGraph(
        navController: NavHostController
    ) {
    NavHost(navController = navController, startDestination = 
    MainScreens.Splash.route) {
    //Default navigation to splash screen
    composable(route = MainScreens.Splash.route) {
        SplashScreen(navController)
    }
    //Navigate to a HomeScreen loader
    composable(route = MainScreens.Home.route){
        HousifyRootScreen(screenNavController = navController)
    }
    //Navigate to screen of each homes details
    composable(route = MainScreens.Details.route){
        HousifyDetailsScreen()
    }
}

}

and then after splash it is navigated to

HousifyRootScreen(screenNavController = navController) where I have:

@Composable
fun HousifyRootScreen(bottomBarNavController: NavHostController = 
rememberNavController(), screenNavController: NavController) {
Scaffold(
    bottomBar = {  BottomBar(navController = bottomBarNavController) }
) {
    val housifyViewModel: HousifyViewModel = viewModel()
    HomeNavGraph(navController = bottomBarNavController,
        screenNavController = screenNavController,
        housifyUiState = housifyViewModel.housifyUiState)
}

}

and HomeNavGraph is the main page that loads after Splash

@Composable
fun HomeNavGraph(
    navController: NavHostController,screenNavController: 
    NavController,housifyUiState: HousifyUiState
) {
    var isSearchPage by remember { mutableStateOf(false)}
    when(housifyUiState) {
        is HousifyUiState.Success -> 
        HousifyHomeScreenContent(housifyUiState = housifyUiState.houses,
        onButtonClick = 
           {screenNavController.navigate(MainScreens.Details.route) },
           onSearchClick = {isSearchPage = true})

}

NavHost(
    navController = navController,
    startDestination = BottomBarScreen.Home.route
) {
    composable(route = BottomBarScreen.Home.route) {
        if (isSearchPage) {
            HousifySearchScreen { isSearchPage = false }

        }
    }

    composable(route = BottomBarScreen.About.route) {
        HousifyAboutScreen()
    }
}

}

Answer 1

I think that you have 2 possible options:

1. You can create BottomNavigationBar as custom View/Composable and add it to every screen that needs to have it but you should handle all navigation by hand
2. You have one BottomNavigationView in MainActivity(or main composable) and listen for changes and hide/show bottom bar for specific screen