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);
}
}
@ignivaravinderrikhi
Copy link

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 ..

@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