Double Modal in React-Native?

Issue

I'm experiencing a lot of difficulty trying to implement a "double modal", i.e. two modals at the same time.

e.g.

I'm using Overlay from the 'react-native-elements' library to achieve the modal effect, however, putting two of them together in a view isn't working as it will only display the first one. I'm also finding that directly setting the height of the overlay isn't having any effect.

I then considered creating a custom component but can't figure out how to dim the background using CSS.

Solution

If you want, change the your element modal to react-native-modal. Keep try and execute the below code. I hope it'll work for you.

import Modal from 'react-native-modal';

const [isModalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

<TouchableOpacity onPress={toggleModal}>
  <Text>Button Text</Text>
    <Modal
      isVisible={isModalVisible}
      onBackdropPress={() => setModalVisible(false)}>
      <View style={{ backgroundColor: 'white', padding: 20, height:250 }}>
        <Text>First box content appear here</Text>
      </View>
      <View style={{ backgroundColor: 'white', padding: 20, height:100, marginTop: 30 }}>
        <Text>Second box content appear here</Text>
      </View>
  </Modal>
</TouchableOpacity>

Answered By - John Ocean