react-native/website/versioned_docs/version-0.48/autogen_Keyboard.md

---
id: version-0.48-keyboard
title: Keyboard
category: APIs
permalink: docs/keyboard.html
original_id: keyboard
---
<div><div><p><code>Keyboard</code> module to control keyboard events.</p><h3><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="docs/keyboard.html#usage">#</a></h3><p>The Keyboard module allows you to listen for native events and react to them, as
well as make changes to the keyboard, like dismissing it.</p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  componentWillMount <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidShowListener <span class="token operator">=</span> Keyboard<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'keyboardDidShow'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_keyboardDidShow<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidHideListener <span class="token operator">=</span> Keyboard<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'keyboardDidHide'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_keyboardDidHide<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  componentWillUnmount <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidShowListener<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidHideListener<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  _keyboardDidShow <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Keyboard Shown'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  _keyboardDidHide <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Keyboard Hidden'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>TextInput
        onSubmitEditing<span class="token operator">=</span><span class="token punctuation">{</span>Keyboard<span class="token punctuation">.</span>dismiss<span class="token punctuation">}</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/keyboard.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a><span class="methodType">static </span>addListener<span class="methodType">(eventName, callback)</span> <a class="hash-link" href="docs/keyboard.html#addlistener">#</a></h4><div><p>The <code>addListener</code> function connects a JavaScript function to an identified native
keyboard notification event.</p><p>This function then returns the reference to the listener.</p><p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for.  This
can be any of the following:</p><ul><li><code>keyboardWillShow</code></li><li><code>keyboardDidShow</code></li><li><code>keyboardWillHide</code></li><li><code>keyboardDidHide</code></li><li><code>keyboardWillChangeFrame</code></li><li><code>keyboardDidChangeFrame</code></li></ul><p>Note that if you set <code>android:windowSoftInputMode</code> to <code>adjustResize</code>  or <code>adjustNothing</code>,
only <code>keyboardDidShow</code> and <code>keyboardDidHide</code> events will be available on Android.
<code>keyboardWillShow</code> as well as <code>keyboardWillHide</code> are generally not available on Android
since there is no native corresponding event.</p><p>@param {function} callback function to be called when the event fires.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a><span class="methodType">static </span>removeListener<span class="methodType">(eventName, callback)</span> <a class="hash-link" href="docs/keyboard.html#removelistener">#</a></h4><div><p>Removes a specific listener.</p><p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for.
@param {function} callback function to be called when the event fires.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a><span class="methodType">static </span>removeAllListeners<span class="methodType">(eventName)</span> <a class="hash-link" href="docs/keyboard.html#removealllisteners">#</a></h4><div><p>Removes all listeners for a specific event type.</p><p>@param {string} eventType The native event string listeners are watching which will be removed.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismiss"></a><span class="methodType">static </span>dismiss<span class="methodType">()</span> <a class="hash-link" href="docs/keyboard.html#dismiss">#</a></h4><div><p>Dismisses the active keyboard and removes focus.</p></div></div></div></span></div>