From 542ab8643ece6e8e29445cf3584e47cc5d39c0e6 Mon Sep 17 00:00:00 2001 From: Gant Laborde Date: Wed, 28 Sep 2016 18:03:04 -0700 Subject: [PATCH] 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 --- Libraries/Components/Keyboard/Keyboard.js | 96 ++++++++++++++++++++++- website/server/extractDocs.js | 1 + 2 files changed, 96 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/Keyboard/Keyboard.js b/Libraries/Components/Keyboard/Keyboard.js index 603a96c6e..c2aa1b134 100644 --- a/Libraries/Components/Keyboard/Keyboard.js +++ b/Libraries/Components/Keyboard/Keyboard.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 ( + * + * ); + * } + * } + *``` + */ +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(); + } + +}; diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index 8f22af6e2..6682986c4 100644 --- a/website/server/extractDocs.js +++ b/website/server/extractDocs.js @@ -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',