react native KeyboardContext

App.js

import React, { PureComponent } from 'react';

import { AppNavigator, setTopLevelNavigator } from './navigation';
import { KeyboardProvider } from './utils/keyboardContext';

export default class App extends PureComponent {
  render() {
    return (
      <KeyboardProvider>
        <AppNavigator ref={navigationRef => setTopLevelNavigator(navigationRef)} />
      </KeyboardProvider>
    );
  }
}

Container.js

import * as React from 'react';
import { withKeyboardContext } from '../../utils/keyboardContext';

class Container extends React.Component {
  render() {
    const { isKeyboardOpen, realFullHeight } = this.props;
    
    console.log('isKeyboardOpen',isKeyboardOpen);
    console.log('realFullHeight',realFullHeight);

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

export default withKeyboardContext(Container);

keyboardContext.js

import React from 'react';
import KeyboardListener from 'react-native-keyboard-listener';
import { fullHeight } from './responsiveSize';

const initialValues = {
  isKeyboardOpen: false,
  realFullHeight: fullHeight,
};

const KeyboardContext = React.createContext(initialValues);

export const withKeyboardContext = Component => {
  return function WrapperComponent(props) {
    return (
      <KeyboardContext.Consumer>
        {({ isKeyboardOpen, realFullHeight }) => (
          <Component {...props} realFullHeight={realFullHeight} isKeyboardOpen={isKeyboardOpen} />
        )}
      </KeyboardContext.Consumer>
    );
  };
};

export class KeyboardProvider extends React.Component {
  state = initialValues;

  render() {
    const { isKeyboardOpen, realFullHeight } = this.state;

    return (
      <KeyboardContext.Provider value={{ isKeyboardOpen, realFullHeight }}>
        {this.props.children}
        <KeyboardListener
          onWillShow={e =>
            this.setState({
              isKeyboardOpen: true,
              realFullHeight: fullHeight - e.endCoordinates.height,
            })
          }
          onWillHide={() => this.setState({ isKeyboardOpen: false, realFullHeight: fullHeight })}
        />
      </KeyboardContext.Provider>
    );
  }
}

export default KeyboardContext;