useAnimatedKeyboard break navigation color #6043

RohovDmytro · 2024-05-23T21:27:35Z

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

The text was updated successfully, but these errors were encountered:

github-actions · 2024-05-23T21:27:53Z

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 · 2024-05-23T21:36:05Z

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 · 2024-05-23T21:39:17Z

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

maciekstosio · 2024-05-27T10:23:36Z

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 · 2024-06-28T00:10:04Z

@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 · 2024-06-28T17:43:23Z

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 · 2024-07-22T10:56:21Z

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 · 2024-07-22T14:46:21Z

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 · 2024-08-01T14:54:35Z

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

maciekstosio · 2024-08-27T10:10:16Z

@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 · 2024-08-27T16:27:23Z

@maciekstosio I think you have it flipped -- when I run the app without useAnimatedKeyboard the background correctly draws behind the nav bar:

When I add useAnimatedKeyboard the area beneath the nav bar turns white, making it impossible to render full-screen content:

maciekstosio · 2024-08-28T14:17:01Z

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

RohovDmytro · 2024-08-29T12:00:42Z

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.

## Summary Resolves #6043. For StatusBar we have a flag that removes top padding when we want to render RN stuff "under" StatusBar. A similar problem was raised in #6043, but for NavigationBar, so I added another flag `isNavigationBarTranslucentAndroid` that removes bottom padding as well. Currently, I see no way to make it automatic. I tried one approach to remove the flags in #5889, but it doesn't seem to be the performant solution. ## Preview |Before|After without flag|After with flag| |-|-|-| |<img width="602" alt="before" src="https://github.com/user-attachments/assets/0032efbe-342a-4e06-81ee-f7351bb032f7">|<img width="602" alt="after-without-flag" src="https://github.com/user-attachments/assets/6f259329-9bf4-4bbb-8ce4-32d671e65a5a">|<img width="602" alt="after-with-flag" src="https://github.com/user-attachments/assets/81c43052-f3b3-4a3b-a9cb-bd974e851c43">| ## Test plan Testing is a bit tricky, because an example from the issue uses a navigation bar package from Expo, which requires Expo and our example app doesn't have Expo. What I did: <details> <summary>Steps</summary> ```bash # clone reanimated from current branch git clone https://github.com/software-mansion/react-native-reanimated.git # checkout current branch git checkout @maciekstosio/Add-support-for-isNavigationBarTranslucentAndroid # install yarn && yarn build # build npm package cd packages/react-native-reanimated ./createNPMPackage.sh --fresh # next, create simple expo project npx create-expo-stack # install library for navigation bar npx expo install expo-navigation-bar # install reanimated npx expo install react-native-reanimated # replace in package.json path to locally-build package i.e.: "react-native-reanimated": "file:react-native-reanimated.tgz" # yarn install # npx expo run:android ``` </details> <details> <summary>App.tsx to test</summary> ```jsx import * as NavigationBar from 'expo-navigation-bar'; import React, { useEffect } from 'react'; import Animated, { useAnimatedKeyboard, useAnimatedStyle, } from 'react-native-reanimated'; import { Platform, StatusBar, StyleSheet, TextInput, View, Text, Button, } from 'react-native'; export default function EmptyExample() { const keyboard = useAnimatedKeyboard({ isNavigationBarTranslucentAndroid: true, }); const animatedStyles = useAnimatedStyle(() => ({ transform: [{ translateY: -keyboard.height.value }], })); useEffect(() => { StatusBar.setBarStyle('dark-content'); NavigationBar.setBackgroundColorAsync('transparent'); }, []); return ( <Animated.View style={[ styles.container, animatedStyles, { justifyContent: 'flex-end', borderWidth: 5, borderColor: '#ff0' }, ]}> <View style={[ styles.center, { height: 200, backgroundColor: '#f0f', borderWidth: 5, borderColor: '#0ff', }, ]}> <Text>{`Android ${Platform.constants['Release']}`}</Text> <TextInput placeholder="Test" /> </View> </Animated.View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'rgba(255,0,255,0.2)' }, center: { justifyContent: 'center', alignItems: 'center' }, }); ``` </details>

github-actions bot added Missing repro This issue need minimum repro scenario Missing info The user didn't precise the problem enough labels May 23, 2024

github-actions bot added the Platform: Android This issue is specific to Android label May 23, 2024

RohovDmytro closed this as completed May 23, 2024

RohovDmytro reopened this May 23, 2024

github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Jun 28, 2024

SickanK mentioned this issue Jul 6, 2024

useAnimatedKeyboard causes problems with edge-to-edge jpudysz/react-native-unistyles#235

Closed

maciekstosio mentioned this issue Aug 23, 2024

feat: add support for isNavigationBarTranslucentAndroid #6431

Merged

maciekstosio closed this as completed in #6431 Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

useAnimatedKeyboard break navigation color #6043

useAnimatedKeyboard break navigation color #6043

RohovDmytro commented May 23, 2024 •

edited

Loading

github-actions bot commented May 23, 2024 •

edited

Loading

RohovDmytro commented May 23, 2024 •

edited

Loading

RohovDmytro commented May 23, 2024

maciekstosio commented May 27, 2024 •

edited

Loading

computerjazz commented Jun 28, 2024 •

edited

Loading

computerjazz commented Jun 28, 2024 •

edited

Loading

maciekstosio commented Jul 22, 2024 •

edited

Loading

maciekstosio commented Jul 22, 2024

fax1ty commented Aug 1, 2024

maciekstosio commented Aug 27, 2024

computerjazz commented Aug 27, 2024

maciekstosio commented Aug 28, 2024

RohovDmytro commented Aug 29, 2024

useAnimatedKeyboard break navigation color #6043

useAnimatedKeyboard break navigation color #6043

Comments

RohovDmytro commented May 23, 2024 • edited Loading

Description

Steps to reproduce

Snack or a link to a repository

Reanimated version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

github-actions bot commented May 23, 2024 • edited Loading

RohovDmytro commented May 23, 2024 • edited Loading

RohovDmytro commented May 23, 2024

maciekstosio commented May 27, 2024 • edited Loading

computerjazz commented Jun 28, 2024 • edited Loading

computerjazz commented Jun 28, 2024 • edited Loading

maciekstosio commented Jul 22, 2024 • edited Loading

maciekstosio commented Jul 22, 2024

fax1ty commented Aug 1, 2024

maciekstosio commented Aug 27, 2024

computerjazz commented Aug 27, 2024

maciekstosio commented Aug 28, 2024

RohovDmytro commented Aug 29, 2024

RohovDmytro commented May 23, 2024 •

edited

Loading

github-actions bot commented May 23, 2024 •

edited

Loading

RohovDmytro commented May 23, 2024 •

edited

Loading

maciekstosio commented May 27, 2024 •

edited

Loading

computerjazz commented Jun 28, 2024 •

edited

Loading

computerjazz commented Jun 28, 2024 •

edited

Loading

maciekstosio commented Jul 22, 2024 •

edited

Loading