react-native-keyboard-controller
react-native-keyboard-controller copied to clipboard
[RNKC-053] - native-stack + statusBarTranslucent causes incorrect positioning
Describe the bug
using a combination of RN 0.69, native-stack and statusBarTranslucent causes some issues. Seems like keyboard insets are also applied automatically, and because of that positioning of views is incorrect.
Repo for reproducing
https://github.com/kirillzyusko/react-native-keyboard-controller/pull/50
To Reproduce Steps to reproduce the behavior:
- Go to Native Stack
- Click on TextInput
Expected behavior
Views shouldn't react on keyboard appearance if they don't subscribed to useKeyboardAnimation animated values.
Screenshots
| Expected | Actual |
|---|---|
![]() |
![]() |
Smartphone (please complete the following information):
- Desktop OS: Mac OS 12.5
- Device: Pixel 3 (emulator)
- OS: Android API 32
- JS engine: JSC
- Library version: 1.0.1
Additional context
Seems like it wasn't an issue in RN 0.68
The progress can be tracked here: https://github.com/kirillzyusko/react-native-screens/tree/refactor/removed-deprecated-replace-system-window-insets
Just found a workaround: if you don't change soft-input method in screens, where status bar translucency is controlled by react-native-screens, then everything works good (comparing to original hook - here we are not using useResizeMode hook):
const useKeyboardAnimationInNativeStack = () => {
const context = useContext(KeyboardContext);
return context.animated;
};
This is a temporary workaround - I'm still looking for a complete solution/fix 👀

