Hi I am new to React Native. I want to open a modal from another modal. I have a modal showing event details and user can delete this event. When they press delete button, I want to add another modal saying 'are you sure ?' as in the picture [![enter image description here][1]][1]

My code doesn't work. I used onModalHide with setTimeOut to close the first one and opend the second one. But did not work. What can be the error here ?

import React, {useRef, useState} from 'react';
import {View, ScrollView, Text, Pressable} from 'react-native';
import styles from '@/screens/dashboard/events/CreatedEventDetails.styles';
import Modal from 'react-native-modal';
import common from '@/config/common';
import {useDispatch, useSelector} from 'react-redux';
import FastImage from 'react-native-fast-image';
import images from '@/config/images';
import {Icon, LoadingIndicator} from '@/components';
import {
  closeEventDetailsModal,
  fetchEventsList,
  handleDeleteEvent,
  handleWithDrawEvent,
  LOADING,
} from '@/store/events/events';
import {EVENT_STATUS} from '@/constants/eventStatus';
import {strings} from '@/localization';
import moment from 'moment';

const CreatedEventDetails = ({isVisible, closeModal}) => {
  const createdEventDetails = useSelector(state => state?.events?.eventDetails);
  const userInfo = useSelector(state => state.profile.user);
  const dispatch = useDispatch();

  const currentEventId = useSelector(state => state.events.currentEventId);

  const isLoading =
    useSelector(state => state?.events?.eventResponseStatus) === LOADING;

  const capitilizedLetter = createdEventDetails?.name
    ?.toLowerCase()
    .charAt(0)
    .toUpperCase();
  const restOfTheName = createdEventDetails?.name?.slice(1);

  const deleteEvent = id => {
    dispatch(handleDeleteEvent(id));
    dispatch(closeEventDetailsModal());
  };

  const withDrawEvent = id => {
    dispatch(handleWithDrawEvent(id));
    dispatch(closeEventDetailsModal());
  };

  function getBgColor(condition) {
    switch (condition) {
      case EVENT_STATUS.STATUS_NEW:
        return '#ef9d50';
      case EVENT_STATUS.STATUS_ACCEPTED:
        return '#a1dc6a';
      case EVENT_STATUS.STATUS_TENTATIVE:
        return 'blue';
      case EVENT_STATUS.STATUS_REJECTED:
        return 'red';
      default:
        return '#ef9d50';
    }
  }

  // to change the modal action according to created events or accepted events, we have to check
  // if the logged in user id is matching with event owner id. ( delete - withdraw action )
  const isOwner = createdEventDetails?.owner?.id === userInfo?.id;

  const createdEventDate = createdEventDetails?.event_date;
  const formattedDate = moment(createdEventDate).format('DD MMM, ddd');

  const fromTime = createdEventDetails?.from_time?.toString();
  const formattedFromTime = moment(fromTime, 'hh:mm').format('LT');

  const toTime = createdEventDetails?.to_time?.toString();
  const formattedToTime = moment(toTime, 'hh:mm').format('LT');

  // second modal state
  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);

  // second modal function
  const toggleModal = () => {
    // when the second modal is open, I close the first one here.
    dispatch(closeEventDetailsModal());
    setIsDeleteModalVisible(!isDeleteModalVisible);
  };

  return (
    <>
      <View style={styles.modalContainer}>
        <Modal
          isVisible={isVisible}
          propagateSwipe
          onBackdropPress={() => this.setState(isVisible)}
          onModalHide={() => {
            setTimeout(() => {
              setIsDeleteModalVisible(!isDeleteModalVisible);
            }, 100);
          }}
          onModalWillHide={() => {
            setTimeout(() => {
              dispatch(fetchEventsList());
            }, 500);
          }}>
          <View style={styles.content}>
            {/* we have to check if event id is matching with currentEventId to prevent undefined problem
          and also modal detail can have previous event detail. this will prevent the issue */}
            {createdEventDetails.id !== currentEventId ? (
              <LoadingIndicator visible />
            ) : (
              <View>
                <LoadingIndicator visible={isLoading} />
                <View style={styles.closeBtnContainer}>
                  <Pressable style={styles.closeBtn} onPress={closeModal}>
                    <Text style={styles.closeText}>X</Text>
                  </Pressable>
                </View>
                <View>
                  <Text
                    style={
                      styles.contentTitle
                    }>{`${capitilizedLetter}${restOfTheName}`}</Text>
                  <Text style={styles.contenSubtTitle}>
                    {formattedDate}
                    {'\n'}
                    {formattedFromTime} - {formattedToTime}
                  </Text>
                  <Text style={styles.contentText}>
                    At {createdEventDetails?.location}
                  </Text>
                  <View style={styles.participantsContainer}>
                    <Text style={styles.contentTitle}>
                      {strings.eventDetails.participantsTitle} (
                      {createdEventDetails?.invites?.length})
                    </Text>
                    <View style={common.stickyButtonLine} />
                    <ScrollView>
                      {createdEventDetails?.invites?.map(invite => (
                        <View style={styles.checkboxContainer} key={invite.id}>
                          <View style={styles.imageContainer}>
                            {invite?.user?.thumb ? (
                              <FastImage
                                source={{uri: invite?.user?.thumb}}
                                style={styles.listItemUserImage}
                                resizeMode={FastImage.resizeMode.cover}
                              />
                            ) : (
                              <Icon
                                icon={images.ic_user}
                                style={styles.noUserIcon}
                              />
                            )}
                            <Text style={styles.contentPersonName}>
                              {invite?.user?.name}
                            </Text>
                          </View>
                          <View
                            style={{
                              backgroundColor: getBgColor(invite?.status),
                              width: 25,
                              height: 25,
                              borderRadius: 25,
                            }}>
                            <Text>{''}</Text>
                          </View>
                        </View>
                      ))}
                    </ScrollView>
                  </View>
                  <View>
                    <View>
                      <Text style={styles.contentTitle}>
                        {strings.eventDetails.hobbiesTitle} (
                        {createdEventDetails?.hobbies?.length})
                      </Text>
                      <View style={common.stickyButtonLine} />
                      <View style={styles.hobbiesContainer}>
                        {createdEventDetails?.hobbies?.map(hobby => (
                          <View style={styles.emojiContainer} key={hobby.id}>
                            <Text>{hobby.emoji}</Text>
                          </View>
                        ))}
                      </View>
                      <View style={common.stickyButtonLine} />
                    </View>
                    <View style={[styles.buttons, styles.singleButtonAlign]}>
                      {isOwner ? (
                        <>
                          <Pressable
                            style={styles.decline}
                            onPress={toggleModal}
                            // onPress={() =>
                            //   deleteEvent(createdEventDetails?.id)
                            // }
                          >
                            <Text style={styles.declineText}>
                              {strings.eventDetails.delete}
                            </Text>
                          </Pressable>
                          // second modal content here 
                          {/* <Modal
                            isVisible={isDeleteModalVisible}
                            propagateSwipe>
                            <View style={styles.content}>
                              <Text>Hello!</Text>
                              <Pressable
                                title="Hide modal"
                                onPress={toggleModal}
                              />
                            </View>
                          </Modal> */}
                        </>
                      ) : (
                        <Pressable
                          style={styles.decline}
                          onPress={() =>
                            withDrawEvent(createdEventDetails?.id)
                          }>
                          <Text style={styles.declineText}>
                            {strings.eventDetails.withdraw}
                          </Text>
                        </Pressable>
                      )}
                    </View>
                  </View>
                </View>
              </View>
            )}
          </View>
        </Modal>
      </View>
     // second modal content here 
      <View style={styles.modalContainer}>
        <Modal isVisible={isDeleteModalVisible} propagateSwipe>
          <View style={styles.content}>
            <Text>Hello!</Text>
            <Pressable title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    </>
  );
};;

export default CreatedEventDetails;
````


  [1]: https://i.stack.imgur.com/BUMfa.png

CodePudding user response：

Here are some way of debugging.

1. first check both the modal is showing up by passing harcoded true value for one by one.
2. if its working correctly, remove those timeouts and apicalls and just check with useState only.
3. if all are fine then try to call the api.