Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Keyboard events for react-native

As of react-native 0.11 this module is obsolete. Now you can do something like the following: Example by GantMan

'use strict'
import { Dimensions } from 'react-native'
import React, {View, DeviceEventEmitter} from 'react-native'
class SomeScene extends React.Component {
  constructor (props) {
    this.state = {
      visibleHeight: Dimensions.get('window').height

  componentWillMount () {
    DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
    DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))

  keyboardWillShow (e) {
    let newSize = Dimensions.get('window').height - e.endCoordinates.height
    this.setState({visibleHeight: newSize})

  keyboardWillHide (e) {
    this.setState({visibleHeight: Dimensions.get('window').height})

  render () {
    return (
      <View style={{height: this.state.visibleHeight}}>

This takes full advantage of RCTKeyboardObserver.m, which is built-in.


First you need to install react-native-keyboardevents:

npm install react-native-keyboardevents --save

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name] Go to node_modules ➜ react-native-keyboardevents and add the .xcodeproj file

In XCode, in the project navigator, select your project. Add the lib*.a from the keyboardevents project to your project's Build Phases ➜ Link Binary With Libraries Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.

Run your project (Cmd+R)

(Thanks to @brysgo for writing the instructions)



// require the module
var KeyboardEvents = require('react-native-keyboardevents');

// Now get a handle on the event emitter and add your callbacks
// to the desired events.
var KeyboardEventEmitter = KeyboardEvents.Emitter;

// Each event will receive a `frames` object, which contains three keys -
// `begin`,  `end`, and `duration` . The `begin` and `end`  keys each
// contain an object describing the bounds of the keyboard (x, y, width
// and height). The `duration` key contains the length of the keyboard
// animation in seconds.

// The frame in `begin` describes the bounds of the keyboard before the
// animation occurred and the frame in `end` describes the bounds the keyboard
// will have, after the animation has completed.
KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillShowEvent, (frames) => {
  console.log('will show', frames);

KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, (frames) => {
  console.log('did show', frames);

KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, (frames) => {
  console.log('will hide', frames);

KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidHideEvent, (frames) => {
  console.log('did hide', frames);

KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillChangeFrameEvent, (frames) => {
  console.log('will change', frames);

KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidChangeFrameEvent, (frames) => {
  console.log('did change', frames);

How to move a view when the keyboard shows up

Distilled from @brysgo's answer on stackoverflow: how-to-auto-slide-the-window-out-from-behind-keyboard-when-textinput-has-focus

var React = require('react-native');
var KeyboardEvents = require('react-native-keyboardevents');
var KeyboardEventEmitter = KeyboardEvents.Emitter;

class YourComponent extends React.Component {

  constructor(props, context) {
    super(props, context);

    this.state = {
      keyboardSpace: 0

    this.updateKeyboardSpace = this.updateKeyboardSpace.bind(this);
    this.resetKeyboardSpace = this.resetKeyboardSpace.bind(this);

  updateKeyboardSpace(frames) {
    this.setState({keyboardSpace: frames.end.height});

  resetKeyboardSpace() {
    this.setState({keyboardSpace: 0});

  componentDidMount() {
    KeyboardEventEmitter.on(KeyboardEvents.KeyboardDidShowEvent, this.updateKeyboardSpace);
    KeyboardEventEmitter.on(KeyboardEvents.KeyboardWillHideEvent, this.resetKeyboardSpace);

  componentWillUnmount() {, this.updateKeyboardSpace);, this.resetKeyboardSpace);

  render() {
    // create your content here
    return (
      // add your content here

      // when the keyboard is shown, this spacer will push up all your other content
      <View style={{height: this.state.keyboardSpace}}></View>


Keyboard events for react-native







No releases published


No packages published