IssueTracker

Component used: Navigation Version used: 2.8.0

I'm currently using Voyager but decided to try migrating to Compose Navigation as it already provides better type-safety. However, I find it difficult to migrate since the Api is lacking in some way while there are some that are available but is only limited to the Library Scope.

This is in conjunction with Issue 361863272

I would like to request non-reified navigation, composable, and NavBackStackEntry.toRoute() wherein you can enter the class's KClass as a parameter.

Voyager provides Screen, and Tab interfaces which could easily be implemented and extended to another interface or abstract class wherein you could create a common Class with common implementations you can tailor according to your needs. Compose Navigation currently doesn't support this but it is much more scalable especially with deeplinks.

Migration to Compose Navigation without any interface proves to be difficult unless the above requested are given. I have here an example implementation of interfaces. I don't know how much effective it will be but technically it could be applied to my project to some extent since there are a lot of caveats I don't know of. It would be much better if Compose Team can provide similar interfaces which could greatly boost migration to the library.

/**
 * Base Class for Compose Navigation Graphs
 *
 * @param GraphEvent A Generic used for propagating Events when EventScope is outside current [ComposeGraph]
 * @property startDestination Start Destination for Navigation Graph
 */
abstract class ComposeGraph<GraphEvent> {
    protected abstract val startDestination: ComposeDestination<*>
    protected abstract val destinations: List<KClass<out ComposeDestination<*>>>

    fun NavGraphBuilder.graph(
        onNavigate: (ComposeDestination<*>) -> Unit,
        onEvent: (GraphEvent) -> Unit
    ){
        navigation(
            startDestination = startDestination,
            route = this@ComposeGraph::class
        ){
            destinations(onNavigate, onEvent)
        }
    }

    private fun NavGraphBuilder.destinations(
        onNavigate: (ComposeDestination<*>) -> Unit,
        onEvent: (GraphEvent) -> Unit
    ){
        destinations.forEach { destinationClass ->
            composable(
                route = destinationClass
            ){ navBackStackEntry ->
                val destination: ComposeDestination<*> = navBackStackEntry.toRoute(route = destinationClass)
                with(destination){
                    Content(navBackStackEntry){
                        handleEvent(
                            destination = destination,
                            event = it,
                            onNavigate = onNavigate,
                            onGraphEvent = onEvent
                        )
                    }
                }
            }
        }
    }

    protected open fun handleEvent(
        destination: ComposeDestination<*>,
        event: Any?,
        onNavigate: (ComposeDestination<*>) -> Unit,
        onGraphEvent: (GraphEvent) -> Unit
    ){

    }
}

/**
 * Base Interface for Compose Destinations
 *
 * @param DestinationEvent A Generic used for propagating Events when EventScope is outside current [ComposeDestination]
 */
interface ComposeDestination<DestinationEvent>{

    /**
     * @param onEvent Lambda called when event is outside current [ComposeDestination]. E.g. Navigating to other graphs
     */
    @Composable
    fun AnimatedContentScope.Content(entry: NavBackStackEntry, onEvent: (DestinationEvent) -> Unit)
}

sealed class BaseComposeNav<T: ComposeGraph<*>>(){
    abstract val tabs: List<T>

    abstract class ComposeNav<T: ComposeGraph<*>>(): BaseComposeNav<T>()

    abstract class ComposeBottomNav<T: ComposeBottomNavGraph<out Any>>(): BaseComposeNav<T>(){
        @Composable
        fun BottomNavigation(
            modifier: Modifier = Modifier,
            controller: NavHostController
        ) {

            NavigationBar(
                modifier = modifier
            ) {
                tabs.forEach { composeBottomNavGraph ->
                    val isSelected by remember(composeBottomNavGraph, controller.currentBackStackEntry?.destination) {
                        derivedStateOf {
                            controller.currentBackStackEntry?.destination?.hierarchy?.any {
                                it.hasRoute(composeBottomNavGraph::class)
                            } == true
                        }
                    }
                    with(composeBottomNavGraph){
                        NavItem(
                            isSelected = isSelected
                        ) {
                            controller.navigate(composeBottomNavGraph)
                        }
                    }
                }
            }
        }
    }

    @Composable
    fun NavigationContent(
        modifier: Modifier = Modifier,
        controller: NavHostController = rememberNavController()
    ) {
        NavHost(
            navController = controller,
            modifier = modifier,
            startDestination = tabs.first()
        ){
            tabs.forEach { composeGraph ->
                with(composeGraph){
                    graph(
                        onNavigate = {
                            controller.navigate(it)
                        }
                    ){
                        controller.handleEvent(composeGraph, it)
                    }
                }
            }
        }
    }

    protected open fun NavHostController.handleEvent(
        graph: T,
        event: Any?
    ){

    }
}

abstract class ComposeBottomNavGraph<GraphEvent: Any>: ComposeGraph<GraphEvent>(){
    @Composable
    protected abstract fun Icon(isSelected: Boolean)

    @get:Composable
    protected abstract val tabName: String

    @Composable
    fun RowScope.NavItem(
        isSelected: Boolean,
        onSelect: () -> Unit
    ) {
        NavigationBarItem(
            selected = isSelected,
            onClick = onSelect,
            icon = {
                Icon(isSelected)
            },
            label = {
                Text(text = tabName)
            }
        )
    }
}



object BottomNav: BaseComposeNav.ComposeBottomNav<ComposeBottomNavGraph<*>>(){
    override val tabs: List<ComposeBottomNavGraph<*>>
        get() = listOfNotNull(
            HomeGraph,
            DebugGraph.takeIf {
                BuildConfig.DEBUG
            },
        )
}

//Graphs
@Serializable
data object HomeGraph: ComposeBottomNavGraph<HomeGraphEvent>(){
    @Composable
    override fun Icon(isSelected: Boolean) {
        TODO("Not yet implemented")
    }
    override val tabName: String
        @Composable
        get() = TODO("Not yet implemented")

    override val startDestination: ComposeDestination<*>
        get() = HomeDestination
    override val destinations: List<KClass<out ComposeDestination<*>>>
        get() = listOfNotNull(
            HomeDestination::class,
            DebugDestination::class.takeIf {
                BuildConfig.DEBUG
            },
        )

    override fun handleEvent(
        destination: ComposeDestination<*>,
        event: Any?,
        onNavigate: (ComposeDestination<*>) -> Unit,
        onGraphEvent: (HomeGraphEvent) -> Unit
    ) {
        when(destination){
            is HomeDestination -> Unit
            is DebugDestination -> when(val destinationEvent = event as? DebugEvent){
                DebugEvent.Back -> TODO()
                null -> TODO()
            }
        }
    }
}

sealed interface HomeGraphEvent{
    data class Debug(val id: String?): HomeGraphEvent
}

@Serializable
data object DebugGraph: ComposeBottomNavGraph<Unit>(){
    @Composable
    override fun Icon(isSelected: Boolean) {
        TODO("Not yet implemented")
    }
    override val tabName: String
        @Composable
        get() = TODO("Not yet implemented")

    override val startDestination: ComposeDestination<*>
        get() = DebugDestination()
    override val destinations: List<KClass<out ComposeDestination<*>>>
        get() = listOf(
            DebugDestination::class,
        )

    override fun handleEvent(
        destination: ComposeDestination<*>,
        event: Any?,
        onNavigate: (ComposeDestination<*>) -> Unit,
        onGraphEvent: (Unit) -> Unit
    ) {
        when(destination){
            is DebugDestination -> when(val destinationEvent = event as? DebugEvent){
                DebugEvent.Back -> TODO()
                null -> TODO()
            }
        }
    }
}

//Destinations
@Serializable
data object HomeDestination: ComposeDestination<Unit> {

    @Composable
    override fun AnimatedContentScope.Content(entry: NavBackStackEntry, onEvent: (Unit) -> Unit) {
        TODO("Not yet implemented")
    }
}

@Serializable
data class DebugDestination(
    val id: String? = null
): ComposeDestination<DebugEvent> {

    @Composable
    override fun AnimatedContentScope.Content(
        entry: NavBackStackEntry,
        onEvent: (DebugEvent) -> Unit
    ) {
        TODO("Not yet implemented")
    }
}

sealed interface DebugEvent{
    data object Back: DebugEvent
}

@Serializable
data object TestDestination: ComposeDestination<String?>{
    @Composable
    override fun AnimatedContentScope.Content(
        entry: NavBackStackEntry,
        onEvent: (String?) -> Unit
    ) {
        TODO("Not yet implemented")
    }
}

@Composable
fun App() {
    val controller = rememberNavController()
    MaterialTheme {
        Scaffold(
            bottomBar = {
                BottomNav.BottomNavigation(controller = controller)
            }
        ) {
            BottomNav.NavigationContent(
                modifier = Modifier.padding(it),
                controller = controller
            )
        }
    }
}