import * as React from 'react' ; import { EmitterSubscription , Keyboard , View } from 'react-native' ; export interface KeyboardSpacerProps { verticalOffset ? : number ; } export interface KeyboardSpacerState { keyboardHeight : number ; } export class KeyboardSpacer extends React . Component < KeyboardSpacerProps , KeyboardSpacerState > { private keyboardWillHideListener ? : EmitterSubscription ; private keyboardDidHideListener ? : EmitterSubscription ; private keyboardDidShowListener ? : EmitterSubscription ; public constructor ( props ) { super ( props ) ; this . state = { keyboardHeight : 0 , } ; } public componentDidMount ( ) { this . keyboardDidShowListener = Keyboard . addListener ( 'keyboardDidShow' , this . keyboardDidShow . bind ( this ) ) ; this . keyboardWillHideListener = Keyboard . addListener ( 'keyboardWillHide' , this . keyboardWillHide . bind ( this ) ) ; this . keyboardDidHideListener = Keyboard . addListener ( 'keyboardDidHide' , this . keyboardDidHide . bind ( this ) ) ; } public componentWillUnmount ( ) { if ( this . keyboardDidShowListener ) { this . keyboardDidShowListener . remove ( ) ; } if ( this . keyboardWillHideListener ) { this . keyboardWillHideListener . remove ( ) ; } if ( this . keyboardDidHideListener ) { this . keyboardDidHideListener . remove ( ) ; } } private keyboardDidShow ( event ) { const verticalOffset = this . props . verticalOffset || 0 ; this . setState ( { keyboardHeight : event . endCoordinates . height + verticalOffset , } ) ; } private keyboardWillHide ( ) { this . setState ( { keyboardHeight : 0 } ) ; } private keyboardDidHide ( ) { this . setState ( { keyboardHeight : 0 } ) ; } public render ( ) { return < View style = { { height : this . state . keyboardHeight } } />; } }