Keyboard events for react-native

react-native-keyboardevents

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) {
    super(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}}>
       ...
      </View>
    )
  }
}

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

Usage

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)

GitHub