A modern programming language that makes developers happier.

kotlinlang

Hello, I'm creating an app with CMP, and ModalBottomSheet appear below the navigation bar. I tried enableEdgeToEdge with safeContentPadding(). With setDecorFitsSystemWindows false too. Any idea how to fix this ?

Do you have adjustResize on your manifest?
And what insets do you provide to your modal bottom sheet? Are you perhaps always padding it at the bottom there?

Perhaps a screenshot of the problem would also help

Yes for `adjustResize` , for the BottomSheet I tried `navigationBars.only(Bottom)`

image.png

Maybe try this :
```enableEdgeToEdge(navigationBarStyle = SystemBarStyle.light(android.graphics.Color.TRANSPARENT, android.graphics.Color.TRANSPARENT))
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) window.isNavigationBarContrastEnforced = false```
light is important here, according to the doc of auto :
```Creates a new instance of [SystemBarStyle]. This style detects the dark mode
* automatically and applies the recommended style for each of the status bar and the
* navigation bar. If this style doesn't work for your app, consider using either [dark] or
* [light].
* - On API level 29 and above, both the status bar and the navigation bar will be
*   transparent. However, the navigation bar with 3 or 2 buttons will have a translucent
*   scrim. This scrim color is provided by the platform and *cannot be customized*.
* - On API level 28 and below, the status bar will be transparent, and the navigation bar
*   will have one of the specified scrim colors depending on the dark mode.```


The screenshot does not necessarily show if the sheet is over the nav bar or if it's under it but the bar itself is just not transparent.

Also when using `SystemBarStyle.auto()` it does some stuff around the contrast which I remember I found not obvious.

Instead I've done this now
```@Composable
private fun EnableEdgeToEdgeSideEffect(
  darkTheme: Boolean,
) {
  DisposableEffect(darkTheme) {
    val systemBarStyle = when (darkTheme) {
      true -&gt; SystemBarStyle.dark(Color.TRANSPARENT)
      false -&gt; SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT)
    }
    enableEdgeToEdge(
      statusBarStyle = systemBarStyle,
      navigationBarStyle = systemBarStyle,
    )
    onDispose {}
  }
}```
Which explicitly uses the .dark or .light version depending on if you are in dark or light mode, and this makes the nav bar truly transparent.
This way you also don't need to change the `window.isNavigationBarContrastEnforced` or anything like that

Which version of material3 are you using for the `ModalBottomSheet`?