Hey!! I'm working with a Compose Multiplatform project using Voyager for tab and screen navigation. ...

# multiplatform

[Eduardo Ruesta]

Hey!! I'm working with a Compose Multiplatform project using Voyager for tab and screen navigation. Right now i'm adding the Logout functionality. When the user clicks on Logout i want to hide the bottomBar and go to Login screen. The issue i'm having is that the bottomBar is already visible and if i add a condition to not show its still showing since it is not rendering back... Any idea what can i do?

[Eduardo Ruesta]

for example i have this logic:

@Composable
fun TabNavigatorScreen(tab: Tab, isLoggedOut: Boolean = false) {
    if (!isLoggedOut) {
        Surface(modifier = Modifier.fillMaxSize()) {
            TabNavigator(tab) {
                Scaffold(
                    bottomBar = {
                        BottomNavigation(
                            backgroundColor = Color.White,
                            elevation = 8.dp,
                            modifier = Modifier.navigationBarsPadding()

                        ) {
                            TabNavigationItem(HomeTab)
                            TabNavigationItem(ResultTab)
                            TabNavigationItem(ProfileTab)
                        }
                    }) {
                    Box(
                        modifier = Modifier.padding(it)
                    ) {
                        CurrentTab()
                    }
                }
            }
        }
    } else {
        Scaffold(
            bottomBar = {}) {
        }
    }
}

but the issue is the first time isLoggedOut is false and i show the bottomBar, then when is logged out the condition is true but since its already visible i can't hide it

[Hiroki Horiguchi]

Maybe Because TabNavigator hasn't been recomposed.

[Hiroki Horiguchi]

The following pages may be helpful
https://developer.android.com/develop/ui/compose/state#state-in-composables

[Hiroki Horiguchi]

(I think it would be better to manage the isLoggedOut flag as a state in the ViewModel instead of putting it in the argument of the Compose function.)

[Nermeen]

I implemented the same idea in my project but I used a nested graph.

Parent Host has two screens the Auth and the Main (which has the bottom bar)

Then the Main screen has a host with the bottom bar tabs.
You can use the parent navigator to navigate to Auth screens and the bottom bar is included in the main screen only so it won't be displayed.

There's a sample about nested graphs. It'll be helpful to check it.

[Hiroki Horiguchi]

If this answer↑ was appropriate, I was off the mark, sorry.

[Eduardo Ruesta]

Hey!!! thanks both for respond this!! I'll take a look which is the best alternative! kodee happy

[Eduardo Ruesta]

Hey @Nermeen do you have an example how do you do that?