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?
TextInput
so it gets the focus; when you tap the button to show the modal, theTextInput
loses focus so the keyboard dismisses. Where do you want to set the keyboard focus when you open the modal? – Heathenizeconsole.log
inonPress
). It's the modal showing up specifically that removes the focus. – Deglutinate