Menu
I'm trying to open a Modal from a TouchHighlight located in another modal. Basically what should happen is, the TouchHighlight in the parent main Modal should open another secondary Modal on top of it, without closing the main Modal.
But I get the following error.
Warning: Attempt to present <RCTModalHostViewController: 0x7fc408fb2460> on <RCTWrapperViewController: 0x7fc40b2c1ac0> which is already presenting (null)
How to do this properly?
348
In your components folder, create a file called Modal. tsx and add the following code: import React from "react"; import { StyleSheet, View, Text, Button } from "react-native"; import RNModal from "react-native-modal"; type ModalProps = { isVisible: boolean; children: React.
To start you will need create the app. npx create-react-native-app multiplemodals now to cd into the folder and run an npm install and cd into the iOS folder and run a pod install. You will need to create each modal in state that you will activate with a Boolean. constructor(props){super(props);this.
import React, { useState } from 'react'; import { StyleSheet, Modal, Text, View, TouchableOpacity } from 'react-native'; export default function App() { const [modalVisible, setModalVisible] = useState(true); return ( <View style={styles. container}> <Text>Open up App. js to start working on your app!
You'll need to define a function hides the modal and pass the function reference to the modal component and execute it on press of the button along side with the navigation action. Just noticed, since you already have a function that toggles the visibility of your modal, you need not define a new function.
Okay found the way. The secondary Modal code should be inside the Primary Modal. This fixes the problem.
<Modal
animationType='fade'
transparent={true}
visible={this.state.modalVisibility}>
<Modal
animationType='fade'
transparent={true}
visible={this.state.secondaryModalVisibility}>
<View style={[styles.modalContainer, modalBackgroundStyle]}>
<View style={styles.innerContainer}>
{this.secondaryContent()}
</View>
</View>
</Modal>
<View style={[styles.modalContainer, modalBackgroundStyle]}>
<View style={styles.innerContainer}>
{this.mainContent()}
</View>
</View>
</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