Search code examples
androidandroid-jetpack-composematerial-designnavigation-android

Android NavigationBar Alternative Approach for Devices with Smaller Screens


I need to provide an alternative NavigationBar implementation should the device's width be less that 600.

Here is the code that I am working with:

val config = LocalConfiguration.current

    val useBottomNavigation by remember {
        derivedStateOf { config.smallestScreenWidthDp < 600 }
    }

    Scaffold(bottomBar = {

        if (useBottomNavigation) {
               // call NavigationBar composable
               BottomNavigationBar()
            }
            else{
               Spacer(
                    Modifier.navigationBarsHeight()
                            .fillMaxWidth()
            )
        }

However, modifier.navigationBarsHeight() call is not being resolved. enter image description here

I am on Compose Version 1.5.1 and Material3 1.2.0-alpha03.

Anyone with an idea on how to go about this in compose please do help.


Solution

  • According to this Migration Table, what used to be Modifier.navigationBarsHeight() in Accompanist is now Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars) in androidx.compose.foundation. The doc on the latter is here.