Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

KeyboardAvoidingView: update bottom height when frame height is changed (#36970)

Browse Source 
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
This commit is contained in:
yaqi.liu
2023-04-20 10:46:54 -07:00
committed by Facebook GitHub Bot
parent 290774fd80
commit 5059ddc5ce
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js
Vendored
+3 -2
View File
@@ -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();
}