Skip to content

Instantly share code, notes, and snippets.

@dbasedow
Created May 28, 2016 09:11
Show Gist options
  • Save dbasedow/f5713763802e27fbde3fc57a600adcd3 to your computer and use it in GitHub Desktop.
Save dbasedow/f5713763802e27fbde3fc57a600adcd3 to your computer and use it in GitHub Desktop.
Keyboard spacing solution for react-native based on the stackoverflow answer http://stackoverflow.com/a/33585501/1783214
/**
* Based on http://stackoverflow.com/a/33585501/1783214
*
* Handle resizing enclosed View and scrolling to input
* Usage:
* <KeyboardHandler ref='kh' offset={50}>
* <View>
* ...
* <TextInput ref='username'
* onFocus={()=>this.refs.kh.inputFocused(this,'username')}/>
* ...
* </View>
* </KeyboardHandler>
*
* offset is optional and defaults to 34
* Any other specified props will be passed on to ScrollView
*/
'use strict';
import React, {Component} from 'react';
import ReactNative, {
ScrollView,
View,
DeviceEventEmitter,
} from 'react-native';
class KeyboardHandler extends Component {
constructor(props) {
super(props);
this.state = {keyboardSpace: 0};
this.focused = null;
this._didShowListener = null;
this._willHideListener = null;
}
onKeyboarDidShow(frames) {
if (!frames.endCoordinates || !this.focused) {
return;
}
this.setState({keyboardSpace: frames.endCoordinates.height});
let scrollResponder = this.refs.scrollView.getScrollResponder();
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
this.focused,
this.props.offset, //additionalOffset
true
);
}
onKeyboardWillHide() {
this.setState({keyboardSpace: 0});
}
componentWillMount() {
this._didShowListener = DeviceEventEmitter.addListener('keyboardDidShow', this.onKeyboarDidShow.bind(this));
this._willHideListener = DeviceEventEmitter.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this));
this.scrollviewProps = {
automaticallyAdjustContentInsets: true,
keyboardShouldPersistTaps: true,
scrollEventThrottle: 200,
};
// pass on any props we don't own to ScrollView
Object.keys(this.props).filter((n) => {
return n != 'children'
})
.forEach((e) => {
this.scrollviewProps[e] = this.props[e]
});
}
componentWillUnmount() {
this._didShowListener.remove();
this._willHideListener.remove();
}
render() {
return (
<ScrollView ref='scrollView' {...this.scrollviewProps}>
{this.props.children}
<View style={{ height: this.state.keyboardSpace }}/>
</ScrollView>
);
}
inputFocused(_this, refName) {
this.focused = ReactNative.findNodeHandle(_this.refs[refName]);
}
static propTypes = {
offset: React.PropTypes.number
};
static defaultProps = {
offset: 0
};
}
export default KeyboardHandler;
@tahaziadeh
Copy link

tahaziadeh commented Jun 22, 2016

very interresting, i've used this component within two situation
1-in a tab, i have 3 tabs in the home page . inside one of them i have 2 inputs, in this case the KeyBoardHandler works perfectly.
2-in a page that could be reached by navigation, in this page i have also 2 inputs . one of them is multi-lined .i've faced a problem with the onBlur event, the 2 inputs were not bluring when i tap outside them. Fortunatly, i've resolved this problem and the update is available in my fork .
thank you for this effort.

@tpisto
Copy link

tpisto commented Jun 23, 2016

@tahaziadeh - I also forked your script and fixed the "[Warning]keyboardWillShow event should be registered via the Keyboard module" by using Keyboard module. For me seems to be working =)

@sloanwolf
Copy link

@tahaziadeh I've forked your script as well, adding TouchableWithoutFeedback to dismiss the keyboard when tapping outside of child inputs, child buttons keep events still. Seems to work well in my situation.

@valerybodak
Copy link

@sloanwolf. Could you please provide your version. Thank you.

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