Is there any elegant way to hide the BottomBar when the keyboard is shown? I'm using the Accompanist...

# compose

[jannis]

Is there any elegant way to hide the BottomBar when the keyboard is shown? I'm using the Accompanist Insets library which gives me my desired keyboard behavior, but I want my TextField directly above my keyboard after the user clicked on it.

[cb]

This should work. You can sprinkle some AnimatedContent over it too, to animate the change:

bottomBar = {
    if (LocalWindowInsets.current.ime.isVisible) {
        BottomNavigation(...)
    }
}

[jannis]

Hmmm tried that. But it gave me weird wiggles on the screen. But only tried it on the emulator (API 29). Maybe I try it on a real device 🤔

[jannis]

I also saw that the method returned true for my initial composition (even though the keyboard was not shown). It immediately switched to false though

[Chris Miller]

I wanted to do something similar recently: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1633538132142800

Note that isVisible returns true from the moment the animation starts displaying the keyboard. It also returns false the moment the animation starts when hiding the keyboard. So you may want to check for isVisible || animationInProgress.

In the end I didn't do the above as it was proving fiddly for my particular setup. Instead I wrapped the bottom nav with the following composable:

@Composable
fun HideFromIme(content: @Composable () -> Unit) {
  AnimatedVisibility(
    visible = !LocalWindowInsets.current.ime.isVisible,
    enter = expandVertically(),
    exit = shrinkVertically(),
  ) {
    content()
  }
}

That gave a pretty smooth transition of the bottom nav disappearing as the keyboard appears (and vice versa).

[jannis]

Using AnimatedVisibility indeed gave me a good result. Thanks for the hint! ❤️