react-navigation/react-native-safe-area-view

Android: keyboard's height bottom inset is added although the keyboard is not shown anymore

Rotemy opened this issue · 2 comments

Bug

On Android only, the bottom view gets a bottom padding when the keyboard is shown which is ok, however, when the keyboard is dismissed the bottom view will still have the padding although the keyboard was dismissed. It is fixed after 0.25 seconds but causing an ugly UI glitch - see the video.

Environment info

React native info output:

System:
    OS: macOS 10.15.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 6.80 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 1.0.0

Steps To Reproduce

  1. Use KeyboardAvoidingView to wrap a bottom view that has an input above it
  2. Use SafeAreaView to wrap the KeyboardAvoidingView
  3. Tap on the input and the keyboard will appear
  4. Dismiss the keyboard
  5. The bottom view will appear for 0.25 seconds with the keyboard's height bottom padding and then will change back to padding 0
    ...

The log will show that the bottom inset is 282 and the keyboard is shown will be false.

Describe what you expected to happen:

The bottom padding was supposed to be 0 when the keyboard was dismissed

I am also facing same issue.

please use https://github.com/th3rdwave/react-native-safe-area-context instead. we will deprecate this library soon.