From 3711ea69375ea420800bac97914aa0d24fc9b1a6 Mon Sep 17 00:00:00 2001 From: Achille Urbain <7644970+waldojeffers@users.noreply.github.com> Date: Fri, 22 Mar 2019 15:01:56 -0700 Subject: [PATCH] Make KeyboardAvoidingView with behavior="height" resize on keyboard close (#18889) Summary: Fixes #13754 Pull Request resolved: https://github.com/facebook/react-native/pull/18889 Differential Revision: D14486115 Pulled By: PeteTheHeat fbshipit-source-id: 7b8b4fa9d2c99fc5d6145fed4681afdc4bb14fb8 --- .../Keyboard/KeyboardAvoidingView.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js index b8b123c86bb2fa..c0ba05093cd51c 100644 --- a/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -65,6 +65,7 @@ class KeyboardAvoidingView extends React.Component { _frame: ?ViewLayout = null; _subscriptions: Array = []; viewRef: {current: React.ElementRef | null}; + _initialFrameHeight: number = 0; constructor(props: Props) { super(props); @@ -113,19 +114,11 @@ class KeyboardAvoidingView extends React.Component { _onLayout = (event: ViewLayoutEvent) => { this._frame = event.nativeEvent.layout; - }; - - UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void { - if ( - nextState.bottom === this.state.bottom && - this.props.behavior === 'height' && - nextProps.behavior === 'height' - ) { - // If the component rerenders without an internal state change, e.g. - // triggered by parent component re-rendering, no need for bottom to change. - nextState.bottom = 0; + if (!this._initialFrameHeight) { + // save the initial frame height, before the keyboard is visible + this._initialFrameHeight = this._frame.height; } - } + }; componentDidMount(): void { if (Platform.OS === 'ios') { @@ -166,7 +159,7 @@ class KeyboardAvoidingView extends React.Component { // this.frame.height will never go back to its original value. // When height changes, we need to disable flex. heightStyle = { - height: this._frame.height - bottomHeight, + height: this._initialFrameHeight - bottomHeight, flex: 0, }; }