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

[hirbod]

We're using useSafeAreaFrame from react-native-context-provider instead, as it reports the correct dimensions. Maybe adding react-native-context-provider as a peer dependency is a good idea? I can't imagine a project in the wild without this package anyway, so it should be a fair ask for the users.

[kirillzyusko]

@hirbod I think you meant react-native-safe-area-context?

I kind of agree, that it's hard to imagine a real project without this dependency, but this project already depends on react-native-reanimated, potentially in future will depend on react-native-edge-to-edge (this project doesn't exist yet, but should be a common dependency for all projects that depends on edge-to-edge mode (react-native-bars etc.) and adding even more deps (react-native-safe-area-context) sounds like you will have to install a bunch of other dependencies to use this package 😀

But anyway thank you for the suggestion - I will think about it and how to organize everything better 👍

[kirillzyusko]

Should be fixed in 1.12.3 🤞