KeyboardDetector.js

import React from 'react';
import {
  Keyboard,
} from 'react-native';
import {
  View,
  Button,
  Text,
  Textarea,
} from 'native-base';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';

class KeyboardDetector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isKeyboardVisible: false,
      text: '',
    };
  }
  
  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        this.setState({ isKeyboardVisible: true });
      },
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        this.setState({ isKeyboardVisible: false });
        this.handleDone();
      },
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  handleDone = () => {
    const { text } = this.state;
    console.log('text is: ' + text);
    // anything you want.
    // e.g. store text to DB.
  }  
  
  render() {
    const {
      isKeyboardVisible,
    } = this.state;

    return (
      <View style={{ flex: 1 }}>
        <Button
          disabled={isKeyboardVisible}
        >
          <Text>KeyboedVisible is: {isKeyboardVisible}</Text>
        </Button>
        <Textarea
          rowSpan={5}
          onChangeText={(text) => {
            this.setState({ text });
          }}
        />
        <KeyboardAccessoryNavigation
          avoidKeyboard={true}
          nextHidden={true}
          previousHidden={true}
          onDone={this.handleDone}
        />
      </View>
    );
  }
}

export default KeyboardDetector;