react-native-extra-dimensions-android icon indicating copy to clipboard operation
react-native-extra-dimensions-android copied to clipboard

WARNING: this package breaks keyboard events and can potentially lead to a hidden tabbar

Open pistonsky opened this issue 3 years ago • 1 comments

When you have a style in your project like so:

const styles = StyleSheet.create({
  container: {
    height: ExtraDimensions.get('REAL_WINDOW_HEIGHT'),
  },
});

all keyboard events will be broken. When app starts, you will receive keyboardDidShow event right away, with some random relatively small value (for example, Samsung S20 has 81.52381134033203 value). However, no keyboard is shown, so this event should not even be dispatched. This can potentially break bottom tab bar if you set it to auto-hide on keyboard. Be aware!

Also, when you actually do focus some text input, the height of keyboard within the event will be wrong - it will be more than it actually is, by the value that comes when you hide the keyboard. And when you hide the keyboard, no keyboardDidHide event will be dispatched. Instead, you will receive keyboardDidShow.

This behavior occurs on some devices, not all of them. For example, I've seen it on Samsung S20 when navigation is setup to use 3-button navigation (soft navigation bar at the bottom).

How to reproduce

Start a new react native project, then install this package, and add code above. I've setup a repo for convenience

pistonsky avatar Mar 22 '22 06:03 pistonsky

This is what you will see when you start the app. No keyboard was shown, but keyboardDidShow was still dispatched. Screenshot_20220322-111905_keyboard

pistonsky avatar Mar 22 '22 06:03 pistonsky