Is it fine to nest Scaffolds? For example, to show a common bottom nav but different top bars for ea...

# compose

[Se7eN]

Is it fine to nest Scaffolds? For example, to show a common bottom nav but different top bars for each screen? 🧵

[Se7eN]

Scaffold(bottomBar = { ... }) {
    NavHost() {
        composable {
            Scaffold(topBar = { ... }) {
                ...
            }
        }
        composable {
            Scaffold(topBar = { ... }) {
                ...
            }
        }
    }
}

[John O'Reilly]

fwiw I've seen a few different approaches used here....some use what you described and others where you pass the bottom bar to each "screen" composable and then have single Scaffold in there that uses that and it's own top bar

[Se7eN]

Just saw the first one in Tivi app. I think I'll go with it

[taponidhi]

How would we handle padding with scaffold nesting?

[Se7eN]

Not sure what kind of padding you're talking about

[taponidhi]

Won’t the nested scaffolds hide the bottom bar of top level scaffold?

[Se7eN]

Nope, the nested scaffolds will be drawn between the top bar and bottom bar of the top level scaffold. We can add a Box for the top level `Scaffold`'s padding:

Scaffold(bottomBar = { ... }) { padding ->
    Box(modifier = Modifier.padding(padding) {
        NavHost() {
            composable {
                Scaffold(topBar = { ... }) {
                    ...
                }
            }
            composable {
                Scaffold(topBar = { ... }) {
                    ...
                }
            }
        }
    }
}

[taponidhi]

I didn't know this. Wow. Thanks. Going to try it rn.