Problem navigating between tabs and screens

[iesedobleac]

Problem navigating between tabs and screens

[Mukuljangir372]

@iesedobleac I've gone through you code but I didn't find the screen code. Could you share the code for screens and tabs including navigation logic as well?

[iesedobleac]

@iesedobleac I've gone through you code but I didn't find the screen code. Could you share the code for screens and tabs including navigation logic as well?

Yes, of course, here it is:

My main App Composable

@Composable
fun App() {

    val tabs = listOf(HomeTab, MapsTab)

    KoinContext {

        MaterialTheme {

            TabNavigator(
                tab = HomeTab,
                tabDisposable = {

                    TabDisposable(
                        navigator = it,
                        tabs = tabs
                    )
                }
            ) {
                Scaffold(topBar = {
                    TopAppBar(title = {
                        Text(text = it.current.options.title)
                    })
                }, bottomBar = {
                    BottomNavigation {

                        tabs.forEach { tab ->
                            TabNavigationItem(tab)
                        }
                    }
                }, content = {
                    CurrentTab()
                })
            }
        }
    }
}

My HomeTab

object HomeTab : Tab {

    override val options: TabOptions
        @Composable
        get() {
            val icon = rememberVectorPainter(Icons.Default.Home)

            return remember {
                TabOptions(
                    index = 0u,
                    title = "Home",
                    icon = icon
                )
            }
        }

    @Composable
    override fun Content() {
        Navigator(screen = HomeScreen()) { navigator ->
            SlideTransition(navigator = navigator)
        }
    }
}

My HomeScreen

class HomeScreen : Screen {


    @Composable
    override fun Content() {
        HomeScreenContent()
    }
}

@Composable
fun HomeScreenContent(viewModel: HomeViewModel = koinInject<HomeViewModel>()) {

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        Button(onClick = {
            navigator.push(DetailScreen())
        }) {
            Text("Go to detail")
        }
    }
}

And finally, this is my DetailScreen:

class DetailScreen : Screen {

    @Composable
    override fun Content() {

        val navigator = LocalNavigator.current

        Box(modifier = Modifier.fillMaxSize()) {

            IconButton(
                onClick = {
                    navigator?.pop()

                }, modifier = Modifier
                    .padding(start = 14.dp, top = 14.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colors.primary)
            ) {
                Icon(
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = null,
                    tint = Color.White
                )
            }

            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.fillMaxSize(),
            ) {
                Text("Detail Screen")
            }
        }
    }
}

[subtosharki]

i am having the same problem trying to use a LocalNavigator.currentOrThrow.push(Screen) inside of a tab and it didnt work, instead it gave me this error

screens.vendor.VendorScreen cannot be cast to cafe.adriel.voyager.navigator.tab.Tab

did you ever find a fix to this?