adds Keyboard.dismiss() function and document Keyboard

Summary:
Simple and elegant.  Now someone can dismiss a keyboard in a way that makes sense.

```js
import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()
```

+ docs
Closes https://github.com/facebook/react-native/pull/9925

Differential Revision: D3935357

fbshipit-source-id: ecd2fb5c72c4dd769951d308e9bb6ee5d888052a
This commit is contained in:
Gant Laborde 2016-09-28 18:03:04 -07:00 committed by Facebook Github Bot
parent eafd9b258f
commit 542ab8643e
2 changed files with 96 additions and 1 deletions

View File

@ -13,5 +13,99 @@
const NativeEventEmitter = require('NativeEventEmitter'); const NativeEventEmitter = require('NativeEventEmitter');
const KeyboardObserver = require('NativeModules').KeyboardObserver; const KeyboardObserver = require('NativeModules').KeyboardObserver;
const dismissKeyboard = require('dismissKeyboard');
const KeyboardEventEmitter = new NativeEventEmitter(KeyboardObserver);
module.exports = new NativeEventEmitter(KeyboardObserver); // The following object exists for documentation purposes
// Actual work happens in
// https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js
/**
* `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 () {
* window.alert('Keyboard Shown');
* }
*
* _keyboardDidHide () {
* window.alert('Keyboard Hidden');
* }
*
* render() {
* return (
* <TextInput
* onSubmitEditing={Keyboard.dismiss}
* />
* );
* }
* }
*```
*/
module.exports = {
/**
* 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.
*/
addListener (nativeEvent: string, jsFunction: Function) {
return KeyboardEventEmitter.addListener(nativeEvent, jsFunction);
},
/**
* Removes all listeners for a specific event type.
*
* @param {string} eventType The native event string listeners are watching which will be removed.
*/
removeAllListeners (eventType: string) {
KeyboardEventEmitter.removeAllListeners(eventType);
},
/**
* Removes a specific subscription.
*
* @param {EmitterSubscription} subscription The subscription emitter to be removed.
*/
removeSubscription (subscription: Object) {
KeyboardEventEmitter.removeSubscription(subscription);
},
/**
* Dismisses the active keyboard and removes focus.
*/
dismiss () {
dismissKeyboard();
}
};

View File

@ -546,6 +546,7 @@ const apis = [
'../Libraries/Image/ImageStore.js', '../Libraries/Image/ImageStore.js',
'../Libraries/Components/Intent/IntentAndroid.android.js', '../Libraries/Components/Intent/IntentAndroid.android.js',
'../Libraries/Interaction/InteractionManager.js', '../Libraries/Interaction/InteractionManager.js',
'../Libraries/Components/Keyboard/Keyboard.js',
'../Libraries/LayoutAnimation/LayoutAnimation.js', '../Libraries/LayoutAnimation/LayoutAnimation.js',
'../Libraries/Linking/Linking.js', '../Libraries/Linking/Linking.js',
'../Libraries/CustomComponents/ListView/ListViewDataSource.js', '../Libraries/CustomComponents/ListView/ListViewDataSource.js',