Android: After hiding the keyboard, the size of KeyboardAvoidingView is reduced by the height of the StatusBar if statusBarTranslucent = true in screenOptions

[mkseva]

Description

In React Native 0.76.0, we noticed that after hiding the keyboard, a strip appears at the bottom of the screen, equal in height to the StatusBar. This behavior occurs only on Android. We do not observe this issue on iOS.

Steps to reproduce

1. Create a basic native stack navigator and add a single screen
2. In screen options, set statusBarTranslucent as true AND statusBarColor as 'transparent'
3. Place a TextInput component on the screen and wrap the screen's content in KeyboardAvoidingView (with behavior='height' or behavior='padding').
4. Tap on the text field; the keyboard appears, and we see that the View adjusts to fit the visible area.
5. Hide the keyboard, and you'll notice that the View is smaller by the height of the status bar (i.e., the View does not occupy the entire visible screen).
   
   

Snack or a link to a repository

https://github.com/mkseva/rnkawbug

Screens version

3.35.0

React Native version

0.76.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

Android emulator

Device model

Pixel 8 Pro

Acknowledgements

Yes

[cemck]

same issue here, when setting NavigationBar to "absolute" with "expo-navigation-bar" and using KeyboardAvoidingView. The TextInput gets pushed to the top with the height of the header height

NavigationBar.setPositionAsync("absolute")