KeyboardAvoidingView has wrong placement with translucent Status Bar

[flodlc]

Describe the bug
I use translucent Status Bar on Android using this code:

    StatusBar.setTranslucent(true);
    StatusBar.setBarStyle("dark-content");
    StatusBar.setBackgroundColor("transparent");

I added navigationBarTranslucent on the KeyboardProvider. It works well when the keyboard is hidden but the height calculation seems wrong with the keyboard open.

Code snippet
Add your code snippet where error has been occurred.

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. A simple screen with a KeyboardAvoidingView and a text input at the bottom (marginTop: 'auto')
2. Nothing added in styles.xml
3. Make the Status bar translucent using this code

    StatusBar.setTranslucent(true);
    StatusBar.setBarStyle("dark-content");
    StatusBar.setBackgroundColor("transparent");

4. statusBarTranslucent={true} on the KeyboardProvider

Expected behavior
The input should stay at the top of the keyboard

Screenshots
Here is a video
Screen_recording_20240508_192540.webm

Smartphone (please complete the following information):

• Desktop OS: MacOS
• Device: Google Pixel 8
• OS: Android
• RN version: 0.74.1
• RN architecture: old
• JS engine: Hermes
• Library version: [e.g. 1.11.7]

I tried many differents combination, I still have this gap. The only way to remove it is to use a normal StatusBar.

[kirillzyusko]

@flodlc is it related to #334?

Can you try to specify keyboardVerticalOffset={-StatusBar.currentHeight} and see if it fixes the problem?

[flodlc]

Yes, it solves the problem and works exactly how it should !
Should I consider it as a hack that will be fixed or a permanent solution ?
Big thank you for the help !

[kirillzyusko]

Should I consider it as a hack that will be fixed or a permanent solution ?

I would say it's a workaround rather than a proper solution. I think the problem comes from the fact that useWindowDimensions

react-native-keyboard-controller/src/components/KeyboardAvoidingView/index.tsx

Line 71 in 810efdb

const { height: screenHeight } = useWindowDimensions();

returns wrong screen metrics on Android if status bar is translucent (see facebook/react-native#41918)

So my understanding that it should be fixed in core - I can expose my own useWindowDimensions hook from this package, but I think it's not the responsibility of this package to expose this hook 🙈

[flodlc]

I totally agree with you but also I think that the power of this library is to hide all the mess under the hood and simply make it works magically 🪄. I reported the bug in the thread you mentioned. Hope it's gonna be fixed at the root level asap