Skip to content

Commit

Permalink
Fix how KeyboardAvoidingView handles the onLayout prop. (#32609)
Browse files Browse the repository at this point in the history
Summary:
Resolves #32608

This PR updates the `KeyboardAvoidingView` to correctly handle the `onLayout` prop.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - `onLayout` prop is handled correctly in `<KeyboardAvoidingView>`

Pull Request resolved: #32609

Test Plan:
| Current Behavior with the `onLayout` prop specified | After applying fix |
|---|---|
| ![Simulator Screen Recording - iPhone 11 - 2021-11-17 at 14 44 09](https://user-images.githubusercontent.com/1406082/142287541-0dbcf137-4d72-4ab6-9367-ac42bdf5aed9.gif) | ![Simulator Screen Recording - iPhone 11 - 2021-11-17 at 14 44 28](https://user-images.githubusercontent.com/1406082/142287611-c7424a6c-b590-48f7-8d74-e96543eab41c.gif) |

Reviewed By: kacieb

Differential Revision: D32481315

Pulled By: philIip

fbshipit-source-id: 2f65440f4996152e4133211136f2920026149ee9
  • Loading branch information
JeffreyHyer authored and facebook-github-bot committed Nov 24, 2021
1 parent 160807d commit 9c5e177
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions Libraries/Components/Keyboard/KeyboardAvoidingView.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,10 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
if (wasFrameNull) {
this._updateBottomIfNecesarry();
}

if (this.props.onLayout) {
this.props.onLayout(event);
}
};

_updateBottomIfNecesarry = () => {
Expand Down Expand Up @@ -157,6 +161,8 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
// eslint-disable-next-line no-unused-vars
keyboardVerticalOffset = 0,
style,
// eslint-disable-next-line no-unused-vars
onLayout,
...props
} = this.props;
const bottomHeight = enabled === true ? this.state.bottom : 0;
Expand Down

0 comments on commit 9c5e177

Please sign in to comment.