Bottom Nav Bar overlaps screen content in Jetpack Compose

Issue

I have a BottomNavBar which is called inside the bottomBar of a Scaffold.
Every screen contains a LazyColumn which displays a bunch of images.
For some reason when I finish scrolling, the BottomNavBar overlaps the lower part of the items list.
How can I fix this?

Here the set content of MainActivity

SetContent{
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "tartufozon") },
                actions = {
                    IconButton(onClick = { Timber.d("Mail clicked") }) {
                        Icon(Icons.Default.Email, contentDescription = null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavBar(navController = navController)
        }
    ) {
    BottomNavScreensController(navController = navController)
    }
}

Solution

As per the API definition for Scaffold, your inner content (the trailing lambda you have your BottomNavScreensController in), is given a PaddingValues object that gives you the right amount of padding for your top app bar, bottom bar, etc.

Right now, you're not referencing that padding at all and hence, your content is not padded in. This is what is causing your overlap.

You can add a Box around your BottomNavScreensController to apply the padding, or pass the padding directly into your BottomNavScreensController so that each individual screen can correctly apply the padding; either solution works.

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        // Apply the padding globally to the whole BottomNavScreensController
        Box(modifier = Modifier.padding(innerPadding)) {
            BottomNavScreensController(navController = navController)
        }
    }
}

Answered By - ianhanniballake