Animating (or setting to fully transparent) StatusBar in Jetpack Compose

Question

I've encountered a problem with transitioning between screens in Jetpack Compose. By default when we navigate in Compose it applies CrossFade animation. The problem is that my second screen has totally different color, so i want StatusBar and optionally NavigationBar to be animated the same way the screen does, but I don't know how.

The gif showing the prolem

I've tried to make StatusBar Transparent by doing systemUiController.setSystemBarsColor(Color.Transparent), but the StatusBar just became white, so it didn't work.

Any propositions are welcome :)

Answer 1

Have you tried to use Edge to Edge configuration? In general It should fix your problem, as It will use your screen colors.