adrielcafe / voyager

🛸 A pragmatic navigation library for Jetpack Compose
https://voyager.adriel.cafe
MIT License
2.57k stars 134 forks source link

Nested Screen in Bottom Navigation #421

Open pankaj1920 opened 5 months ago

pankaj1920 commented 5 months ago

this is my bottom navigation

class HomePage : Screen { @Composable override fun Content() { Surface { TabNavigator(tab = HomeScreen) { Scaffold(

                bottomBar = {
                    BottomNavigation {
                        TabNavigationItem(tab = HomeScreen)
                        TabNavigationItem(tab = BookmarkScreen)
                        TabNavigationItem(tab = ProfileScreen)
                    }
                }
            ) {
                Column(modifier = Modifier.padding(it)) {
                    CurrentTab()
                }
            }
        }
    }
}

}

@Composable fun RowScope.TabNavigationItem(tab: Tab) { val tabNavigator = LocalTabNavigator.current BottomNavigationItem(selected = tabNavigator.current == tab, onClick = { tabNavigator.current = tab }, icon = { Icon(painter = tab.options.icon!!, contentDescription = tab.options.title) }) }

This is my HomeScreen

object HomeScreen :Tab{

override val options: TabOptions
    @Composable
    get() {
        val title ="Home"
        val icon = rememberVectorPainter(Icons.Default.Home)
        return remember {
            TabOptions(0u,"Home",icon)

        }
    }

@Composable
override fun Content() { 

      val navigator = LocalNavigator.currentOrThrow 

        RedButton(
                    text = rightBtnText,
                    onClick = {
                        navigator.push(ProductDetailScreen(id=2)
                    },
                    modifier = Modifier.weight(1f).height(40.dp)
                )    }

}

so when i navigate from HomeScreen to ProductDetail Screen bottom navigation is not visible. i want to make bottom navigation visible in ProductDetail Screen and if i navigate from ProdutDetailScreen to other Screen in that case also Bottom navigation show be visible and In bottom navigation home icon shoud be selected.

Is there any way to achive it

philipkraeutl commented 3 months ago

Checkout the nested navigation explained here: https://voyager.adriel.cafe/navigation/tab-navigation/