Keyboard #

Keyboard component to control keyboard events.

Usage #

The Keyboard component 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(nativeEvent, jsFunction) #

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} nativeEvent 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} jsFunction function to be called when the event fires.

static removeAllListeners(eventType) #

Removes all listeners for a specific event type.

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

static removeSubscription(subscription) #

Removes a specific subscription.

@param {EmitterSubscription} subscription The subscription emitter to 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