Menu
How to dismiss the modal view by tapping screen in React Naitve, the RN Modal component seems do not provide the api
578
To close the modal, simply call the handleClose() function inside the onLoginFormSubmit() function body.
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true.
</Text> <Modal visible={modalVisible} onRequestClose={() => setModalVisible(false)}> <Pressable style={styles. outsideModal} onPress={(event) => { if (event. target == event. currentTarget) { setModalVisible(false); } }} > <View style={styles.
React Native Modal Example Let's see an example of displaying a pop-up modal on clicking the button. Once we clicked the button, state variable isVisible sets to true and opens the Modal component. To implement the Modal component import Modal from the react-native library. onRequestClose = {() =>{ console.
You can use a TouchableWithoutFeedback component within the modal component with an onPress property that dismisses the modal.
<Modal visible={booleanThatHandlesModalVisibility}>
<TouchableWithoutFeedback onPress={() => funcToHideModal()}>
<View>
...
</View>
</TouchableWithoutFeedback>
</Modal>
If you want an area of the modal that doesn't hide the modal on press you can add another TouchableWithoutFeedback without an onPress property to catch the event before the first one like this:
<Modal visible={booleanThatHandlesModalVisibility}>
<TouchableWithoutFeedback onPress={() => funcToHideModal()}>
<View>
<TouchableWithoutFeedback>
<View>...</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
