Сохранять клавиатуру при отображении модального окна React Native

Question

Я хочу показать модальное окно, когда пользователь нажимает кнопку, не закрывая клавиатуру. К сожалению, клавиатура отключается, как только появляется модальное окно.

Минимальный вариант воспроизведения:

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

К вашему сведению, я использую expo.

Как можно Я заставляю клавиатуру работать?

Answer 1

Вы можете добавить скрытый TextInput внутри модального окна с атрибутом autoFocus, это довольно простой обходной путь, когда вы нажимаете кнопку и появляется модальное окно, фокус будет go на скрытом вводе, сохраняя клавиатуру открытой.

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