Skip to content

Commit 3711ea6

Browse files
WaldoJeffersfacebook-github-bot
authored andcommittedMar 22, 2019
Make KeyboardAvoidingView with behavior="height" resize on keyboard close (#18889)
Summary: <!-- Required: Write your motivation here. If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged. --> Fixes #13754 Pull Request resolved: #18889 Differential Revision: D14486115 Pulled By: PeteTheHeat fbshipit-source-id: 7b8b4fa9d2c99fc5d6145fed4681afdc4bb14fb8
1 parent e2bf843 commit 3711ea6

File tree

1 file changed

+6
-13
lines changed

1 file changed

+6
-13
lines changed
 

‎Libraries/Components/Keyboard/KeyboardAvoidingView.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
6565
_frame: ?ViewLayout = null;
6666
_subscriptions: Array<EmitterSubscription> = [];
6767
viewRef: {current: React.ElementRef<any> | null};
68+
_initialFrameHeight: number = 0;
6869

6970
constructor(props: Props) {
7071
super(props);
@@ -113,19 +114,11 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
113114

114115
_onLayout = (event: ViewLayoutEvent) => {
115116
this._frame = event.nativeEvent.layout;
116-
};
117-
118-
UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void {
119-
if (
120-
nextState.bottom === this.state.bottom &&
121-
this.props.behavior === 'height' &&
122-
nextProps.behavior === 'height'
123-
) {
124-
// If the component rerenders without an internal state change, e.g.
125-
// triggered by parent component re-rendering, no need for bottom to change.
126-
nextState.bottom = 0;
117+
if (!this._initialFrameHeight) {
118+
// save the initial frame height, before the keyboard is visible
119+
this._initialFrameHeight = this._frame.height;
127120
}
128-
}
121+
};
129122

130123
componentDidMount(): void {
131124
if (Platform.OS === 'ios') {
@@ -166,7 +159,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
166159
// this.frame.height will never go back to its original value.
167160
// When height changes, we need to disable flex.
168161
heightStyle = {
169-
height: this._frame.height - bottomHeight,
162+
height: this._initialFrameHeight - bottomHeight,
170163
flex: 0,
171164
};
172165
}

0 commit comments

Comments
 (0)