useAnimatedKeyboard break navigation color

RohovDmytro commented 4 months ago

Description

After upgrading to the latest version with expo@51 when I use keyboardInfoAnimated inside of a modal I've started observing changes in the color of bottom navigation on Android.

Android 14
Gesture Navigation enabled

Steps to reproduce

use keyboardInfoAnimated from inside of a modal

const keyboardInfoAnimated = useAnimatedKeyboard({
    isStatusBarTranslucentAndroid: true,
  });

Snack or a link to a repository

Reanimated version

3.11.0

React Native version

0.74.1

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

github-actions[bot] commented 4 months ago

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

RohovDmytro commented 4 months ago

This might also be relevant, these are the settings of the nav bar:

['expo-navigation-bar', {
    "position": "absolute",
    "backgroundColor": BACKGROUND_COLOR,
    "borderColor": '#00000000',
    "barStyle": "light"
  }]

RohovDmytro commented 4 months ago

bottom inset from useSafeAreaInsets is 24 when I render modal without keyboard height listener, and 0 when I can that hook.

maciekstosio commented 4 months ago

Hi, could you provide a snack or repo with reproduction and some steps or video what's the issue? At this point, I'm not sure.

bottom inset from useSafeAreaInsets is 24 when I render modal without keyboard height listener, and 0 when I can that hook.

But does this cause any problems for you? It's is possible that it changes - we turn immersive mode to listen to keyboard changes and apply margins to compensate for that.

computerjazz commented 3 months ago

@maciekstosio I can confirm including useAnimatedKeyboard anywhere in the app causes a transparent navigation bar to render white. Snack here: https://snack.expo.dev/@easydan/android-navigation-bar-color-bug

Repro steps:

create snack with transparent navbar
launch snack on android emulator (or android device)
background snack
go to Settings -> System -> Gestures -> System Navigation
Choose "Gesture Navigation"
Return to snack
Observe white bottom navbar as a result of useAnimatedKeyboard hook being called

navbar-color-bug

computerjazz commented 3 months ago

What is the purpose of setWindowInsets(defaultInsets) here: https://github.com/software-mansion/react-native-reanimated/blob/3188d92cc2fc0c44219f2cd9d2b09aea0b88e45c/android/src/main/java/com/swmansion/reanimated/keyboard/WindowsInsetsManager.java#L65

that seems to be what's causing the issue -- if I update insets to 0 immediately after, the navbar issue goes away, though I'm not sure if this has other side effects:

    if (mKeyboard.getState() == KeyboardState.OPEN) {
      mKeyboard.updateHeight(insets);
      mNotifyAboutKeyboardChange.call();
    }
    setWindowInsets(defaultInsets);
    updateInsets(0, 0); // <-- added this line 

    return defaultInsets;

maciekstosio commented 2 months ago

What is the purpose of setWindowInsets(defaultInsets) here:

https://github.com/software-mansion/react-native-reanimated/blob/3188d92cc2fc0c44219f2cd9d2b09aea0b88e45c/android/src/main/java/com/swmansion/reanimated/keyboard/WindowsInsetsManager.java#L65

that seems to be what's causing the issue -- if I update insets to 0 immediately after, the navbar issue goes away, though I'm not sure if this has other side effects:
    if (mKeyboard.getState() == KeyboardState.OPEN) {
      mKeyboard.updateHeight(insets);
      mNotifyAboutKeyboardChange.call();
    }
    setWindowInsets(defaultInsets);
    updateInsets(0, 0); // <-- added this line 

    return defaultInsets;

Hi, sorry for long delay and thank you for your input. To observe keyboard changes we need updateWindowDecor(false) which expands the view to the edges, but omits insets at the same time. So we get the insets and apply them as padding to compensate for that. When adding the line you proposed when having 3-button navigation, or even gesture navigation but with a background, it will cover visible area. If you're interested in that topic you can take a look at this issue https://github.com/software-mansion/react-native-reanimated/pull/5851.

I guess this will be the same problem as with status bar where we just have special flag for that - isStatusBarTranslucent. The flag is needed because when you set transparent the insets are there just the background is transparent, and we have no way of observing background change. There is ongoing PR to tackle that https://github.com/software-mansion/react-native-reanimated/pull/5889, if we won't merge it, I'll probably add a flag isNavigationBarTranslucent to solve this issue.

maciekstosio commented 2 months ago

Btw as a workaround maybe you could use NavigationBar.setVisibilityAsync this method actually hides the navigation bar, thus works well with useAnimatedKeyboard, because the insets change.

fax1ty commented 2 months ago

How can I disable padding of the bottom navigation? I want to fill the whole screen

maciekstosio commented 1 month ago

@computerjazz Hi, I added PR that adds a flag that removes the inset for bottom navigation (#6431), but I'm debugging the "clean up" behavior. Correct me If I'm wrong - when you run your snack without useAnimatedKeyboard the bottom padding exists, am I right? I have a feeling, that it works when commenting out, as a side effect of our clean up logic.

computerjazz commented 1 month ago

@maciekstosio I think you have it flipped -- when I run the app without useAnimatedKeyboard the background correctly draws behind the nav bar: Screenshot 2024-08-27 at 9 25 29 AM

When I add useAnimatedKeyboard the area beneath the nav bar turns white, making it impossible to render full-screen content: Screenshot 2024-08-27 at 9 25 36 AM

maciekstosio commented 1 month ago

@computerjazz Hmm, but is it? I mean on the initial load, not when you build it with useAnimatedKeyboard and then comment out. See the gif below: Aug-28-2024 16-14-08

RohovDmytro commented 1 month ago

I've switched into using react-native-keyboard-controller which supports reanimated and it works seamlessly. I especially like it top level provider that enabled the level of controls over top and nav bar appearance.

software-mansion / react-native-reanimated