Spacer component to handle keyboard show and hide

KeyboardSpacer.tsx

import * as React from 'react';
import { Animated, Keyboard, KeyboardEvent, Platform } from 'react-native';

type Props = {
  offset?: number;
};

type State = {
  keyboardHeightAnim: Animated.Value;
};

export default class KeyboardSpacer extends React.Component<Props, State> {
  static defaultProps = {
    offset: 0,
  };

  private keyboardHeight = new Animated.Value(0);

  componentDidMount() {
    if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', this.handleKeyboardShow);
      Keyboard.addListener('keyboardWillHide', this.handleKeyboardHide);
    } else {
      Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow);
      Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'ios') {
      Keyboard.removeListener('keyboardWillShow', this.handleKeyboardShow);
      Keyboard.removeListener('keyboardWillHide', this.handleKeyboardHide);
    } else {
      Keyboard.removeListener('keyboardDidShow', this.handleKeyboardShow);
      Keyboard.removeListener('keyboardDidHide', this.handleKeyboardHide);
    }
  }

  private handleKeyboardShow = (e: KeyboardEvent) => {
    Animated.spring(this.keyboardHeight, {
      toValue: e.endCoordinates.height - (this.props.offset || 0),
    }).start();
  };

  private handleKeyboardHide = () => {
    Animated.spring(this.keyboardHeight, {
      toValue: 0,
    }).start();
  };

  render() {
    return <Animated.View style={{ height: this.keyboardHeight }} />;
  }
}