Unable to open a new modal after closing a previous one

Environment

System: OS: macOS 12.3.1 CPU: (4) x64 Intel® Core™ i5-6360U CPU @ 2.00GHz Memory: 75.99 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.7.0 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 7.20.3 - /usr/local/bin/npm Watchman: 2021.08.02.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2 System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7678000 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 1.8.0_242 - /usr/bin/javac Python: Not Found npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.4 => 0.63.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Platforms

iOS

Versions

• Android: 11
• iOS: 15.2
• react-native-modal: ^11.6.1
• react-native: 0.63.4
• react: 16.13.1

Description

So essentially, i created my own popup (made with react-native-modal) in order to finish the session, i put a button inside this popup, when i press it, i call the second modal while closing the previous one, pretty easy, but the thing is, it only works on Android, on iOS, the second modal just simply doesn’t open at all, i gave it a timeout and still nothing, swapping the order from closing and open the second one, still nothing

Here is the iPhone picture

Here is the Android picture with the second modal opened

Reproducible Demo

Create multiple modals, then open one of them and inside that modal call the other one by making a button (obviously killing or closing the previous one), all this tested on iOS devices or simulator

        <Modal
          style={[styles.popUpView, {marginTop: 36}]}
          isVisible={isPopUp}
          animationIn="zoomIn"
          animationOut="zoomOut"
          hasBackdrop={Platform.OS === 'android' ? true : false}
          backdropColor="transparent"
          backdropOpacity={0}
          onBackButtonPress={() => setPopUp(!isPopUp)}
          onBackdropPress={() => setPopUp(!isPopUp)}>
          <CerrarPopUpView
            privacy={() => {
              Linking.openURL('http://agendame.io/privacidad/');
              setPopUp(!isPopUp);
            }}
            contact={() => {
              Linking.openURL('http://agendame.io/contacto');
              setPopUp(!isPopUp);
            }}
            session={() => {
              setPopUp(!isPopUp);
              if (Platform.OS === 'ios') {
                setTimeout(() => {
                  setModal(!isModal);
                }, 1000);
              }
              setModal(!isModal);
            }}
          />
        </Modal>
        <Modal
          style={styles.modalView}
          isVisible={isModal}
          animationIn="slideInUp"
          propagateSwipe
          hasBackdrop={false}
          onBackButtonPress={() => setModal(!isModal)}
          onBackdropPress={() => setModal(!isModal)}>
          <CerrarSesionModalView
            cerrar={() => {
              setModal(!isModal);
              UserInfo.CerrarSesion(props);
            }}
            cancelar={() => setModal(!isModal)}
          />
        </Modal>

[JeffreyVanelderenACA]

Managed to find a fix, in the onModalHide of your first modal, use InteractionManager.runAfterInteractions(() => setSecondModalVisible(true)); that will set your second modal visible. It will delay a task until current animations are done, which is way better than setTimeout.

See docs here

[SeanRoberts]

@JeffreyVanelderenACA nice find! It probably wouldn’t be much work to update my useOrchestratedModals hook up above to use that approach instead of the timeout. I’ve found using the timeout works quite well, although obviously it falls apart if you have different modals with different animation timings.