Keyboard avoiding view doesn't attempt to initialize correctly when created while a keyboard is already open

[chrisnojima]

Description

I noticed that spawning a KeyboardAvoidingView while a keyboard is already up causes it to not initialize correctly. I believe its because it just assumes the keyboard is not shown yet. There is already a flow where it handles a null keyboard event when an onLayout happens but it just sets the height to 0. In my case I just use the Keyboard API to query the state and set it instead which works for me. I only tested this on iOS so I'm not making a full PR but I figured i'd document this in case others run into this issue

   _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
-      this.setState({bottom: 0});
+      if (Keyboard.isVisible()) {
+	      this.setState({bottom: Keyboard.metrics().height});
+      } else {
+	      this.setState({bottom: 0});
+      }
       return;
     }

React Native Version

0.70.7

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.2.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 60.61 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.7.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/bin/npm
Watchman: 2023.02.20.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 28, 30, 31, 33
Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
System Images: android-31 | Google APIs Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64
Android NDK: 23.1.7779620
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.7 => 0.70.7
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Make a view which launches a keyboard
2. Show the keyboard
3. Make a view which has a KeyboardAvoidingView (on ios i'm using padding)
4. See it's state has bottom: 0 and it's layout is incorrect
5. Apply patch
6. 1-4 but now it works

Snack, code example, screenshot, or link to a repository

n/a

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[Gregoirevda]

@chrisnojima Why was this closed? Any issues applying this?

[chrisnojima]

Hi,
I closed this as the RN repo wasn't really moving forward with fixing things so I gave up and just maintained my own version / patches