gistfile1.txt

var React = require('react-native');
var {DeviceEventEmitter, View, StyleSheet} = React;

var styles = StyleSheet.create({
	main: {
		position: 'absolute',
		top: 0,
		left: 0,
		right: 0
	}
})

class Viewport extends React.Component{
	constructor(props){
		super(props);
		
		// autobind
		this.onKeyboardDidShow = this.onKeyboardDidShow.bind(this);
		this.onKeyboardDidHide = this.onKeyboardDidHide.bind(this);
		
		// subscribers
		this.subscriberKeyboardDidShow = null;
		this.subscriberKeyboardDidHide = null;
	}
	
	componentDidMount(){
          DeviceEventEmitter.addListener('keyboardDidShow', this.onKeyboardDidShow);
		  DeviceEventEmitter.addListener('keyboardDidHide', this.onKeyboardDidHide);
	}
	
	componentWillUnmount(){
		// remove show subscriber
		if(this.subscriberKeyboardDidShow){
			this.subscriberKeyboardDidShow.remove();
			this.subscriberKeyboardDidShow = null;
		}
		// remove hide subscriber
		if(this.subscriberKeyboardDidHide){
			this.subscriberKeyboardDidHide.remove();
			this.subscriberKeyboardDidHide = null;
		}
	}
	
	onKeyboardDidShow(e){
		var {endCoordinates: {height = 0} = {}} = e;
        this.setState({height});
	}
	
	onKeyboardDidHide(e){
		this.setState({height: 0});
	}
	
	render(){
		// deconstruct height
		var {children} = this.props;
		var {height = 0} = this.state || {};
		// render
		return <View style={[styles.main, {bottom: height}]}>
			{children}
		</View>;
	}
}

module.exports = Viewport;