react-native-keyboard-controller icon indicating copy to clipboard operation
react-native-keyboard-controller copied to clipboard

[RNKC-053] - native-stack + statusBarTranslucent causes incorrect positioning

Open kirillzyusko opened this issue 3 years ago • 1 comments

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:

  1. Go to Native Stack
  2. Click on TextInput

Expected behavior

Views shouldn't react on keyboard appearance if they don't subscribed to useKeyboardAnimation animated values.

Screenshots

Expected Actual
image image

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

kirillzyusko avatar Aug 12 '22 19:08 kirillzyusko

The progress can be tracked here: https://github.com/kirillzyusko/react-native-screens/tree/refactor/removed-deprecated-replace-system-window-insets

kirillzyusko avatar Aug 26 '22 08:08 kirillzyusko

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 👀

kirillzyusko avatar Oct 24 '22 13:10 kirillzyusko