Persist keyboard when showing a React Native modal

Question

I want to show a modal when the user taps a button, without dismissing the keyboard. Unfortunately, the keyboard is dismissed as soon as the modal appears.

Minimum repro case:

import * as React from "react";
import { Button, Modal, Text, TextInput, View } from "react-native";

function TestComp() {
    const [showingModal, setshowingModal] = React.useState(false);
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22 }}>

            <Modal visible={showingModal} transparent onRequestClose={() => setshowingModal(false)}>
                <View style={{ flex: 1, marginTop: 22 }}>
                    <Button title={"hide modal"} onPress={() => setshowingModal(false)} />
                </View>
            </Modal>

            <TextInput placeholder="Focus to show keyboard" />
            <Button title={"Show modal"} onPress={() => setshowingModal(true)} />
        </View>
    );
}

FYI, I am using expo.

How can I force the keyboard to persist?

The keyboard opens when you tap the `TextInput` so it gets the focus; when you tap the button to show the modal, the `TextInput` loses focus so the keyboard dismisses. Where do you want to set the keyboard focus when you open the modal? — Christos Lytras, May 09 '20 at 14:50
@ChristosLytras, pressing the button doesn't remove the focus on the keyboard (for example I can put a `console.log` in `onPress`). It's the modal showing up specifically that removes the focus. — Ryan Pergent, May 09 '20 at 18:38

alain00 · Answer 1 · 2020-05-09T15:04:39.813

You can add a hidden TextInput inside the modal with the attribute autoFocus, it's a pretty simple workaround, when you press the button and the modal showsup the focus will go to the hidden input keeping the keyboard open

https://snack.expo.io/Q01r_WD2A

import * as React from 'react';
import {Button,Modal,Text,TextInput,View,Keyboard,ScrollView} from 'react-native';

export default function TestComp() {
  const [showingModal, setshowingModal] = React.useState(false);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center", marginTop: 22 }}>
      <Modal
        visible={showingModal}
        transparent
        onRequestClose={() => setshowingModal(false)}>
        <View style={{ flex: 1, marginTop: 22 }}>
          <TextInput autoFocus={true} placeholder="Autofocus to keep the keyboard" style={{display: 'none'}} />
          <Button title={'hide modal'} onPress={() => setshowingModal(false)} />
        </View>
      </Modal>

      <TextInput placeholder="Focus to show keyboard" />
      <Button title={'Show modal'} onPress={() => setshowingModal(true)} />
    </View>
  );
}

`autofocus` doesn't seem to work when the display is none. Even if I find some other solution to hide it (opacity: 0), it causes the keyboard to hide then appear again. It also forces me to find and refocus on the previous input when I hide the modal. — Ryan Pergent, May 09 '20 at 18:51

Persist keyboard when showing a React Native modal

1 Answers1