[Android] useAnimatedKeyboard hook breaks translucent status bar

[peterlazar1993]

Description

I have a translucent StatusBar so that I can draw content beneath the status bar.

On Android, after un-mounting a screen with the useAnimatedKeyboard hook with isStatusBarTranslucentAndroid set to true, the status bar loses it's translucency and I cannot draw content beneath the StatusBar again.

This issue was previously reported in #3631 and a fix was deployed in #3958. I do not think the fix is complete since on un-mount the status bar is broken.

keyboard.mp4

Workaround

Reset the StatusBar on component un-mount

...
useEffect(() => {
    return () => {
      StatusBar.setBarStyle('light-content');
      StatusBar.setTranslucent(true);
      StatusBar.setBackgroundColor('transparent');
    };
  }, []);
...

Steps to reproduce

1. Setup repo, run on Android
2. Press the useAnimatedKeyboard Bug button
3. Once page mounts, navigate back
4. The status bar is not translucent anymore

Snack or a link to a repository

https://github.com/peterlazar1993/reanimated-bug

Reanimated version

3.0.2

React Native version

0.71.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Realme X7 Max - Android 13

Acknowledgements

Yes

[TomWq]

That's true. I thought I was the only one with that problem

[ugar0ff]

same issues