Work around for currently not working behavior='height' of KeyboardAvoidingView

KeyboardAvoidingView.js

/**
 * Work around for currently not working behavior='height' of KeyboardAvoidingView
 * Please note that this is just a way around the issue and not an actual fix
 * Tested on:
 *  - iOS 10.2 (both simulator and actual device): react 16.0.0-alpha.6 & react-native 0.44.2
 * @see https://github.com/facebook/react-native/issues/13754
 * @see https://stackoverflow.com/questions/41616457/keyboardavoidingview-reset-height-when-keyboard-is-hidden
 * @see https://github.com/facebook/react-native/blob/master/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L163-L166
 * Issues:
 *  - onLayout is not called when the keyboard is dismissed,
 *      therefore this.frame.height does not get updated back to its initial value.
 *      rendered height calculation is: this.frame.height - this.state.bottom
 *      where this.state.bottom is the keyboad height,
 *      so frame.height does not actually need to be reduced when keyboards pops up
 *  - OnLayout is called after 'render', so even if it was actually called, it would not work properly
 *      could be fixed by triggering another render but it would not be good for performance
 * Fix: fixate value of this.frame.height to its initial value before component update
 */
import React from 'react';
import { KeyboardAvoidingView } from 'react-native';

export default class KeyboardAvoidingViewFix extends KeyboardAvoidingView {

  static propTypes = {
    ...KeyboardAvoidingView.PropTypes
  }

  _initial_layout_height = null;

  componentWillUpdate (nextProps, nextState, nextContext) {
    if (this.frame) {
      this._initial_layout_height = this._initial_layout_height || this.frame.height;
      this.frame.height = this._initial_layout_height;
    }
    super.componentWillUpdate(nextProps, nextState, nextContext);
  }
}

Weird, it doesn't happen for me, maybe you can try commenting out line 35: super.componentWillUpdate...,
The only thing it does is forcing keyboard height to 0 if it hasn't changed since last update, the issue might come from that.
Although the component is not supposed to re-render when that happens in theory.

Let me know if that worked.

@escobar5 's issue was also happening for me in the middle of typing something into a TextInput on an Android device. Removing the super.componentWillUpdate call didn't help.

This works for me for the expected use case (hiding keyboard properly adjusts the height of my view). But a couple of issues I ran into:

• The user clicks on a different text input with the same keyboard. The height of the view adjusts to full, then it adjusts back to the keyboard size.
• I have a keyboard view that has auto-suggestions and another keyboard view without auto-suggestions (this is a small bar at the top of the keyboard with 3 word suggestions to choose). Switching between these two keyboard types does not adjust the height correctly. The view will be at the height of the previous keyboard configuration.

Hello. This workaround is working perfect for me. There is just one problem on initial rendering the view doesn't shrinks when input is focussed on first attempt but it works fine on later attempts any specific reason for that .. and can you please reply this ASAP since I am in a deadline situation here ..

@escobar5 @mienaikoe
same issue here, how did you solve it?

Replace componentWillUpdate to UNSAFE_componentWillUpdate (react-native 0.56)

doesn't fix the problem for me