How to move from Tabs of one Screen or more.

[N-Pu]

I have 5 tabs: TabA, TabB. TabC, TabD, TabE and in each of them there is a possibility to navigate, i.e. I have inserted Navigator inside and can open screens there. The user clicked the button on TabA and went to Screen1. I need to be able to move Screen1 from any Tab by clicking a button to TabB, not the current stack of Tabs. Pardon me if this is a strange question, but I need help with this! I tried navigating through the tabs and after opening the screen but it didn't work.

Thanks for reading.

[ezer-mackenzie]

Hi! I ran into a very similar issue and finally got it working, so I wanted to share what helped me.

In my case, I had a TabNavigator managing three main tabs (like your TabA–TabE setup), but I also needed to push a Screen (e.g., AccountScreen) outside the current tab flow — and still be able to do it from any tab. The key was to ensure that:

The root of my app is wrapped in a Navigator(screen = HomeLayout()).

I obtain the LocalNavigator outside the TabNavigator scope, before I enter the nested tab structure. Otherwise, the Navigator context gets shadowed or lost.

Here’s a simplified version of how I made it work:

class HomeLayout : Screen {
    @Composable
    override fun Content() {
        val tabs = listOf(ReviewTab, SearchTab, RewardTab)
        val localNavigator = LocalNavigator.currentOrThrow // Importante: antes del TabNavigator

        TabNavigator(ReviewTab) {
            Scaffold(
                bottomBar = {
                    NavigationBar {
                        val localTabNavigator = LocalTabNavigator.current

                        tabs.forEach { tab ->
                            NavigationBarItem(
                                selected = localTabNavigator.current.key == tab.key,
                                onClick = { localTabNavigator.current = tab },
                                icon = { Icon(painter = tab.options.icon!!, contentDescription = tab.options.title) },
                                label = { Text(tab.options.title) }
                            )
                        }

                        NavigationBarItem(
                            selected = false,
                            onClick = { localNavigator.push(AccountScreen) },
                            icon = { Icon(painter = rememberVectorPainter(Octicons.Home16), contentDescription = "Cuenta") },
                            label = { Text("Account") }
                        )
                    }
                },
                content = { CurrentTab() }
            )
        }
    }
}

This setup keeps the tab stack isolated while letting you open external screens like AccountScreen from anywhere.

Let me know if you want to see a fully working snippet — happy to share more!

[tinyweasel]

I need a solution for the opposite of this. A Screen using LocalNavigator that goes back to a tab using LocalTabNavigator.