useAnimatedKeyboard break navigation color

[RohovDmytro]

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

1. 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]

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]

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]

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

[maciekstosio]

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]

@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

Maybe related to this call?

react-native-reanimated/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/keyboard/WindowsInsetsManager.java

Lines 78 to 80 in 4e75ca1

	WindowCompat.setDecorFitsSystemWindows(
	currentActivity.getWindow(), decorFitsSystemWindow);
	});

seems related: https://stackoverflow.com/questions/64153785/android-11-window-setdecorfitssystemwindow-doesnt-show-screen-behind-status-a

[computerjazz]

What is the purpose of setWindowInsets(defaultInsets) here:

react-native-reanimated/android/src/main/java/com/swmansion/reanimated/keyboard/WindowsInsetsManager.java

Line 65 in 3188d92

setWindowInsets(defaultInsets);

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]

What is the purpose of setWindowInsets(defaultInsets) here:

react-native-reanimated/android/src/main/java/com/swmansion/reanimated/keyboard/WindowsInsetsManager.java

Line 65 in 3188d92

setWindowInsets(defaultInsets);

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 #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 #5889, if we won't merge it, I'll probably add a flag isNavigationBarTranslucent to solve this issue.

[maciekstosio]

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]

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

[maciekstosio]

@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.