Bottom Nav Bar overlaps screen content in Jetpack Compose

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)
        }
    }
}

Following ianhanniballake's answer and its comments and just to save you few minutes. The code would be something like:

Scaffold(
    topBar = {
      //
    },
    bottomBar = {
        //
    }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(
          PaddingValues(0.dp, 0.dp, 0.dp, innerPadding.calculateBottomPadding()) {
            BottomNavScreensController(navController = navController)
        }
    }
}

Scaffold(
    bottomBar = {
       BottomNavigationBar(navController = navController)
   }
) { innerPadding ->
      Box(modifier = Modifier.padding(innerPadding)) {
               DestinationsNavHost(
                  navGraph = NavGraphs.root,
                  navController = navController,
                  engine = navHostEngine
                )
         }
}