Shared Group Composables

[Eschryn]

I would like to be able to define a shared Composable that will wrap the content of a group. for example:

val navigator = rememberNavigator()
NavHost(
    navigator = navigator
) {
    group("navigationBar", "home") {
        wrapper = { content ->
            val items = listOf("home", "library", "settings")
 
            Scaffhold(
                bottomBar = {
                    NavigationBar {
                        items.forEachIndexed { index, item ->
                            NavigationBarItem(
                                icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
                                label = { Text(item) },
                                selected = selectedItem == index,
                                onClick = { 
                                    selectedItem = index,
                                    navigator = navigator.navigate("/navigationBar/${items[selectedIndex]}")
                                }
                            )
                        }
                    }
                }
            ) { innerPadding ->
                content()
            }
        }
    
        scene("home") { HomeScreen() }
        scene("library") { LibraryScreen() }
        scene("setting") { SettingsScreen() }
    }
}

[Tlaster]

Currently you can have a composable that does the same thing and wrap your screen like this:

@Composable
fun YourScaffhold(
    navigator: Navigator,
    content: @Composable () -> Unit,
) {
    val items = listOf("home", "library", "settings")
    Scaffhold(
        bottomBar = {
            NavigationBar {
                items.forEachIndexed { index, item ->
                    NavigationBarItem(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { 
                            selectedItem = index,
                            navigator = navigator.navigate("/navigationBar/${items[selectedIndex]}")
                        }
                    )
                }
            }
        }
    ) { innerPadding ->
        content()
    }
}
    // in your NavHost's scene
    scene("home") { YourScaffhold(navigator = navigator) { HomeScreen() } }