Created
June 7, 2017 02:37
-
-
Save steven89/f7aedca683deee6ee8211399e94cd583 to your computer and use it in GitHub Desktop.
Work around for currently not working behavior='height' of KeyboardAvoidingView
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
doesn't fix the problem for me