React-native-navigation: Closing RN modal closes navigation modal.

[sesm]

🐛 Bug Report

If we open a RN modal, then open navigation modal (via Navigation.showModal), then close RN modal, navigation modal will close too.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Open RN modal via Modal component, without using Navigation.
2. Open Navigation modal via Navigation.showModal.
3. Close RN modal.

Expected behavior

Navigation modal remains.

Actual Behavior

Navigation modal is closed

Your Environment

• React Native Navigation version: 6.5.0
• React Native version: 0.62.2
• Platform(s) (iOS, Android, or both?): iOS (not Reproducible on Android)
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, 13.0, Debug

Reproducible Demo

import * as React from 'react';
import { Modal, View, Text, TouchableOpacity, SafeAreaView } from 'react-native';
import { Navigation } from 'react-native-navigation';

const screenName = 'test-screen-2';
export const TestScreen2 = () => {
    return (
        <View>
            <Text>Wix modal</Text>
            <TouchableOpacity onPress={() => Navigation.dismissModal(screenName)}>
                <Text>Back</Text>
            </TouchableOpacity>
        </View>
    );
};

Navigation.registerComponent(screenName, () => TestScreen2);

export const TestScreen = () => {
    const [isOpen, setIsOpen] = React.useState(false);
    const closeModal = () => setIsOpen(false);
    const openModal = () => setIsOpen(true);
    const openWixModal = () => {
        Navigation.showModal({
            stack: {
                children: [
                    {
                        component: {
                            name: screenName,
                            id: screenName,
                            options: {
                                modalPresentationStyle: 'fullScreen',
                            },
                        },
                    },
                ],
            },
        });
        setTimeout(closeModal, 2000);
    };
    return (
        <View>
            <Text>Test screen 1</Text>
            <TouchableOpacity onPress={openModal}>
                <Text>Open Modal</Text>
            </TouchableOpacity>
            <Modal visible={isOpen}>
                <SafeAreaView>
                    <TouchableOpacity onPress={openWixModal}>
                        <Text>Open Wix Modal</Text>
                    </TouchableOpacity>
                </SafeAreaView>
            </Modal>
        </View>
    );
};

[danilobuerger]

@sesm Whats the use case for using react-native modal instead of the one provided by rnn?

[sesm]

@danilobuerger We have an Action Sheet component that uses RN modal. We want to open a full screen modal from Action Sheet and close Action Sheet. If we close Action Sheet first, we hit this issue https://github.com/facebook/react-native/issues/10471, if we open Navigation modal first, then close Action Sheet, we hit this case.

[danilobuerger]

The crux is the code in react-native modal:

[viewController.presentingViewController dismissViewControllerAnimated:animated completion:completionBlock];

https://github.com/facebook/react-native/blob/d85d5d2e1974b463318e4c86da29a5ccdd60a977/React/Views/RCTModalHostViewManager.m#L99

viewController == RCTModalHostViewController
viewController.presentingViewController == TestScreen RNN ViewController

So dismissing from that will cause the rnn modal to close as it was also presented from it.

There is nothing we can do here to act on it as the fault is in another code base. I would suggest not using react-native modal when using rnn.

[sesm]

@danilobuerger Thanks for explanation!
Is there a workaround that will change presentingViewController to other view?
I tried passing the code with Navigation.showModal as a callback from upper level component, but this doesn't help.

[danilobuerger]

No, thats just how modals work. You should be looking into not using react-natives modal. It shouldn't be hard to use an action sheet with rnn. If you need help come and join us on discord. I am sure somebody will be able to help you out there.

[sesm]

We need to refactor our Action Sheet to not use react-native modals then. That's not hard, just needs some work on our side.
Thanks again!