keyboard spacer

import React from 'react';
import ReactNative from 'react-native';

const { View, LayoutAnimation, Keyboard } = ReactNative;

class KeyboardSpacer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardHeight: 0,
    };
  }

  componentWillMount() {
    this.subscriptions = [
      Keyboard.addListener('keyboardDidShow', this.keyboardDidShow),
      Keyboard.addListener('keyboardWillHide', this.keyboardWillHide),
    ];
  }

  componentWillUnmount() {
    this.subscriptions.forEach((sub) => sub.remove());
  }

  setLayoutAnimation({ duration, easing }) {
    if (duration) {
      LayoutAnimation.configureNext({
        duration: duration,
        update: {
          duration: duration,
          type: LayoutAnimation.Types[easing] || 'keyboard',
        },
      });
    }
  }

  keyboardDidShow = (event) => {
    this.setLayoutAnimation(event);
    this.setState({
      keyboardHeight: event.endCoordinates.height - this.props.offset,
    });
  };

  keyboardWillHide = (event) => {
    this.setLayoutAnimation(event);
    this.setState({ keyboardHeight: 0 });
  };

  render() {
    const style={ height: this.state.keyboardHeight };

    return (
      <View style={style} />
    );
  }
}

KeyboardSpacer.defaultProps = {
  offset: 0,
};

KeyboardSpacer.propTypes = {
  offset: React.PropTypes.number.isRequired,
};

export default KeyboardSpacer;