Keyboard #

Keyboard module to control keyboard events.

Usage #

The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

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

  _keyboardDidShow () {
    alert('Keyboard Shown');
  }

  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

Methods #

static addListener(eventName, callback) #

The addListener function connects a JavaScript function to an identified native keyboard notification event.

This function then returns the reference to the listener.

@param {string} eventName The nativeEvent is the string that identifies the event you're listening for. This can be any of the following:

keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame

@param {function} callback function to be called when the event fires.

static removeListener(eventName, callback) #

Removes a specific listener.

@param {string} eventName The nativeEvent is the string that identifies the event you're listening for. @param {function} callback function to be called when the event fires.

static removeAllListeners(eventName) #

Removes all listeners for a specific event type.

@param {string} eventType The native event string listeners are watching which will be removed.

static dismiss(0) #

Dismisses the active keyboard and removes focus.

You can edit the content above on GitHub and send us a pull request!

← Prev Next →

The Basics

Guides

Guides (iOS)

Guides (Android)

components