From 5059ddc5ce623234820f231e5f4d75ea9ddf5a5b Mon Sep 17 00:00:00 2001 From: "yaqi.liu" Date: Thu, 20 Apr 2023 10:46:54 -0700 Subject: [PATCH] KeyboardAvoidingView: update bottom height when frame height is changed (#36970) Summary: Fix this issue: https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/36970 Reviewed By: rshest Differential Revision: D45138176 Pulled By: NickGerleman fbshipit-source-id: b7ce6d75622ed6e8f104ae0d8441e1cb97cfa15b --- .../Libraries/Components/Keyboard/KeyboardAvoidingView.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index 9fb5637c6c5..db89a91ab9e 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -112,14 +112,15 @@ class KeyboardAvoidingView extends React.Component { }; _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(); }