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?

Deglutinate

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? – Heathenize

@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. – Deglutinate

Answer 1

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>
  );
}

Malena

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. – Deglutinate