Bottom Navigation in Compose

Question

I want to create BottomNavigation with two items. Screen for each item is build in Compose. My LeadActivity layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        tools:ignore="FragmentTagUsage" />
</FrameLayout>

NavigationGraph:

    <navigation xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/nav_graph"
        app:startDestination="@+id/home_fragment">
    
        <fragment
            android:id="@+id/home_fragment"
            android:name="com.app.android.rate.home.ui.Home.HomeFragment"
            android:label="Home" />
    
        <fragment
            android:id="@+id/profile_fragment"
            android:name="com.app.android.rate.home.ui.profile.ProfileFragment"
            android:label="Profile"></fragment>
    
    </navigation>

LeadActivity:

    class LeadActivity : AppCompatActivity() {
        
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            
            setContent {
                RateMeAppTheme {
                    ContentScreen()
                }
            }
        }
        companion object {
            fun start(context: Context) =
                Intent(context, LeadActivity::class.java).let(context::startActivity)
        }
    }

My Composable function:

    @Composable
    fun ContentScreen() {
        val navController = rememberNavController()
        val scaffoldState = rememberScaffoldState()
        var currentScreen by remember { mutableStateOf(Screens.Home) }
    
    
        val bottomBar: @Composable () -> Unit = {
            if (currentScreen == Screens.Home) {
                BottomBar(
                    navController = navController,
                    screens = screenList
                )
            }
        }
    
        Scaffold(
            bottomBar = {
                bottomBar()
            },
            scaffoldState = scaffoldState,
            drawerContent = {},
            drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
        ) { innerPadding ->
            NavigationHost(navController = navController)
        }
    }
    
    @Composable
    fun BottomBar(
        modifier: Modifier = Modifier,
        screens: List<Screens>,
        navController: NavController,
    ) {
        BottomNavigation(modifier = modifier) {
            val navBackStackEntry by navController.currentBackStackEntryAsState()
            val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
            screens.forEach { screen ->
                BottomNavigationItem(
                    icon = { Icon(imageVector = screen.icon, contentDescription = screen.title) },
                    label = { Text(screen.title) },
                    selected = currentRoute == screen.title,
                    onClick = {
                        
                    }
                )
            }
        }
    }
    
    @Composable
    fun NavigationHost(navController: NavController) {
        val homeScreen = Screens.Home.title
        NavHost(
            navController = navController as NavHostController,
            startDestination = homeScreen
        ) {
            composable(homeScreen) {
                navController.navigate(R.id.home_fragment)
            }
            composable(Screens.Profile.title) {
                navController.navigate(R.id.profile_fragment)
            }
        }
    }

Currently I get error:

Navigation action/destination com.app.android.rate:id/home_fragment cannot be found from the current destination Destination.

Should I find NavController in LeadActivity and pass it to @ContentScreen()?

Answer 1

You don't put navController.navigate() inside the composable function, you put a Composable view