KeyboardAvoidingView: update bottom height when frame height is chang…

…ed (#36970)

Summary:
Fix this issue: #29499

- We should change the bottom height if the frame height of KeyboardAvoidingView is changed

In some scenarios, the height of `KeyboardAvoidingView` would be changed because its container is re-layouted. So `onLayout` of `KeyboardAvoidingView` may be triggered more than once.

https://github.com/facebook/react-native/blob/bbc3657ff4efd0218e02ad9a3c73725a7f8a366c/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L114-L125

But at line 122 above, `_updateBottomIfNecessary ` would be called only for the first trigger of `onLayout`. That means, if the height of `KeyboardAvoidingView` is changed, the bottom height can't be updated.

#### See the videos below:

##### before

In this video, `KeyboardAvoidingView ` is rendered twice, and the height is changed from 844 to 753, `bottomHeight ` is not updated when the height changed, so there is a white gap below the `continue` button. Once I re-open the keyboard, `_updateBottomIfNecessary` is called again, then the white gap disappeared.

https://user-images.githubusercontent.com/25719782/232962924-c69adc11-deb9-4426-9b5c-4e990a0470db.mp4

##### after

https://user-images.githubusercontent.com/25719782/232962956-a163020f-5f40-4d82-9f6c-5ee67416c489.mp4

## Changelog:

[GENERAL] [CHANGED] - change `_onLayout` to update bottom height when frame height is changed

Pull Request resolved: #36970

Reviewed By: rshest

Differential Revision: D45138176

Pulled By: NickGerleman

fbshipit-source-id: b7ce6d75622ed6e8f104ae0d8441e1cb97cfa15b

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -112,14 +112,15 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
   };
 
   _onLayout = async (event: ViewLayoutEvent) => {
-    const wasFrameNull = this._frame == null;
+    const oldFrame = this._frame;
     this._frame = event.nativeEvent.layout;
     if (!this._initialFrameHeight) {
       // save the initial frame height, before the keyboard is visible
       this._initialFrameHeight = this._frame.height;
     }
 
-    if (wasFrameNull) {
+    // update bottom height for the first time or when the height is changed
+    if (!oldFrame || oldFrame.height !== this._frame.height) {
       await this._updateBottomIfNecessary();
     }