Permalink
Browse files

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 #9925

Differential Revision: D3935357

fbshipit-source-id: ecd2fb5c72c4dd769951d308e9bb6ee5d888052a
  • Loading branch information...
1 parent eafd9b2 commit 542ab8643ece6e8e29445cf3584e47cc5d39c0e6 @GantMan GantMan committed with Facebook Github Bot Sep 29, 2016
Showing with 96 additions and 1 deletion.
  1. +95 −1 Libraries/Components/Keyboard/Keyboard.js
  2. +1 −0 website/server/extractDocs.js
@@ -13,5 +13,99 @@
const NativeEventEmitter = require('NativeEventEmitter');
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();
+ }
+
+};
@@ -546,6 +546,7 @@ const apis = [
'../Libraries/Image/ImageStore.js',
'../Libraries/Components/Intent/IntentAndroid.android.js',
'../Libraries/Interaction/InteractionManager.js',
+ '../Libraries/Components/Keyboard/Keyboard.js',
'../Libraries/LayoutAnimation/LayoutAnimation.js',
'../Libraries/Linking/Linking.js',
'../Libraries/CustomComponents/ListView/ListViewDataSource.js',

0 comments on commit 542ab86

Please sign in to comment.