title: React Native: How to open the keyboard programmatically after closing a modal?
body: <p>Let's consider the following situation:</p>
  
  <p>There is a page with an <code>Input</code> and a <code>Button</code> to open a modal.</p>
  
  <p>In the modal, there is the other <code>Button</code> to close this modal, to focus the <code>Input</code> and to show the <code>Keyboard</code>.</p>
  
  <p><strong>The problem:</strong></p>
  
  <p>Right after pressing the other <code>Button</code> to close the modal, to focus the <code>Input</code> and to show the <code>Keyboard</code> the following happens:</p>
  
  <ol>
  <li>The modal is closed.</li>
  <li>The <code>Input</code> has focus.</li>
  <li>But the <code>Keyboard</code> is <strong>NOT</strong> shown.</li>
  </ol>
  
  <p>This is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect, useRef } from 'react';
  import { View } from 'react-native';
  
  import { Button, Input, Overlay } from 'react-native-elements';
  
  const App = () =&gt; {
    const [isInputFocused, setInputFocused] = useState(false);
    const [isModalVisible, setModalVisible] = useState(false);
  
    const inputRef = useRef(null);
  
    useEffect(() =&gt; {
      isInputFocused ? inputRef.current.focus() : inputRef.current.blur();
    }, [isInputFocused]);
  
    const handleInputFocus = () =&gt; setInputFocused(true);
    const handleInputBlur = () =&gt; setInputFocused(false);
  
    const handleOpenModalButtonPress = () =&gt; setModalVisible(true);
  
    const handleFocusInputButtonPress = () =&gt; {
      setModalVisible(false);
  
      setInputFocused(true);
    };
  
    const handleModalBackdropPress = () =&gt; setModalVisible(false);
  
    return (
      &lt;View style={{ justifyContent: 'space-around', flex: 1, padding: 25 }}&gt;
        &lt;Input
          ref={inputRef}
          onFocus={handleInputFocus}
          onBlur={handleInputBlur}
        /&gt;
  
        &lt;Button
          title="Open Modal"
          onPress={handleOpenModalButtonPress}&gt;
        &lt;/Button&gt;
  
        &lt;Overlay visible={isModalVisible} onBackdropPress={handleModalBackdropPress}&gt;
          &lt;Button title="Focus Input and Open Keyboard" onPress={handleFocusInputButtonPress} /&gt;
        &lt;/Overlay&gt;
      &lt;/View&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  
  <p>You can see it live <a href="https://snack.expo.io/@marian13/767c72" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>The question:</strong></p>
  
  <p>Is it possible to open the keyboard programmatically? It would probably solve my problem.</p>
  
  <p>If not, could somebody explain what I am missing with my current approach or suggest a different solution?</p>
  
  <p>Thanks in advance.</p>
  
  <p><em>P.S.</em></p>
  
  <ul>
  <li><p><a href="https://react-native-elements.github.io/react-native-elements/" rel="nofollow noreferrer"><code>react-native-elements</code></a> package is used here only for styling purposes.</p>
  
  <p><a href="https://react-native-elements.github.io/react-native-elements/docs/input.html" rel="nofollow noreferrer"><code>Input</code></a> inherits all <a href="https://reactnative.dev/docs/textinput.html" rel="nofollow noreferrer"><code>TextInput</code></a> props, <a href="https://react-native-elements.github.io/react-native-elements/docs/overlay.html" rel="nofollow noreferrer"><code>Overlay</code></a> - <a href="https://reactnative.dev/docs/modal#props-1" rel="nofollow noreferrer"><code>Modal</code></a> props, and <a href="https://react-native-elements.github.io/react-native-elements/docs/button.html" rel="nofollow noreferrer"><code>Button</code></a> -  <a href="https://reactnative.dev/docs/touchablewithoutfeedback#props" rel="nofollow noreferrer"><code>TouchableWithoutFeedback</code></a> props.</p>
  
  <p>So, I suppose, they should behave almost the same as casual React Native <code>TextInput</code>, <code>Modal</code> and <code>TouchableWithoutFeedback</code>.</p></li>
  <li><p>Currently, I have tested this code only on Android.</p></li>
  </ul>