Skip to content

Instantly share code, notes, and snippets.

@steven89
Created June 7, 2017 02:37
Show Gist options
  • Save steven89/f7aedca683deee6ee8211399e94cd583 to your computer and use it in GitHub Desktop.
Save steven89/f7aedca683deee6ee8211399e94cd583 to your computer and use it in GitHub Desktop.
Work around for currently not working behavior='height' of KeyboardAvoidingView
/**
* 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);
}
}
@aknad
Copy link

aknad commented Nov 13, 2018

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

@truongtv22
Copy link

Replace componentWillUpdate to UNSAFE_componentWillUpdate (react-native 0.56)

@Orsunmigbare
Copy link

doesn't fix the problem for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment