Exception thrown when dismissing a modal on the top of another one

Bug

I cannot close a modal if it is open over another one :

• When I open the first modal, i can close it properly, everything is fine
• I open a new modal over that first modal
• I try to close it and I get one the following error

I want the second modal to close properly without throwing an error

Environment info

Library	Version
@gorhom/bottom-sheet	3.6.6
react-native	0.64.2
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.3

I hope some of you can help me, I struggled about this issue for a really long time 😅

Thank you in advance,

Cheers

Steps To Reproduce

1. Open a modal
2. Open a new modal within the first one
3. Close the newly opened modal

Describe what you expected to happen:

1. I’d like the modal to close without throwing an error

Reproducible sample code

Here is my code :

import {
    BottomSheetBackdrop,
    BottomSheetModal,
} from '@gorhom/bottom-sheet';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../store';

import { templates } from './templates/templates.constants';

const Modal = () => {
    const bottomSheetModalRef = useRef<BottomSheetModal[]>([]);
    const modals = useSelector((state: RootState) => state.modals.modals);
    const dispatch = useDispatch();

    useEffect(() => {
        if (modals.length >= 1) {
            bottomSheetModalRef.current[modals.length - 1]?.present();
        }
    }, [modals.length]);

    return modals.map((modal: any, index: number) => {
        const { template, templateProps, modalProps } = modal;
        const Template = templates[template];
        return (
            <BottomSheetModal
                name={index + ''}
                key={index}
                ref={(el) => bottomSheetModalRef.current[index] = el}
                index={1}
                snapPoints={['75%']}
                backdropComponent={BottomSheetBackdrop}
                stackBehavior={'push'}
            >
                <Template
                    {...templateProps}
                    modalProps={modalProps}
                    templateProps={templateProps}
                />
            </BottomSheetModal>
        );
    });
};

export default Modal;

[pnogier]

Hi guys, I ended up creating a ref for each modal, anyway we will have a maximum of 2 modals stacked at the same time, So I create to refs :

    const modalRef0 = useRef<BottomSheetModal>(null);
    const modalRef1 = useRef<BottomSheetModal>(null);

Then I open them in my useEffect, checking my modals state :

    useEffect(() => {
        if (modals.length === 1) {
            modalRef0?.current?.present();
        } else if (modals.length === 2) {
            modalRef1?.current?.present();
        }
    }, [modals.length]);

Then I use the same condition to close one ref or another.

But when I use my handleCancel :

    const handleCancel = () => {
        Reactotron.log('cancel')
        if (modals.length === 1) {
            modalRef0?.current?.close();
            dispatch(popModal());
        } else if (modals.length === 2) {
            modalRef1?.current?.close();
            dispatch(popModal());
        }
    };

Given as props to my modal template as following :

return modals.map((modal: any, index: number) => {
        const { template, templateProps, modalProps } = modal;
        const Template = templates[template];
        return (
            <BottomSheetModal
                key={index}
                ref={index === 0 ? modalRef0 : index === 1 ? modalRef1 : null}
                index={1}
                snapPoints={[-1, modalProps.height ? modalProps.height : '75%']}
                onDismiss={handleDismiss}
                backdropComponent={BottomSheetBackdrop}
                stackBehavior={'push'}
            >
                <Template
                    {...templateProps}
                    onConfirm={(values) => handleConfirm(modal, values)}
                    onCancel={handleCancel}
                    modalProps={modalProps}
                    templateProps={templateProps}
                />
            </BottomSheetModal>
        );
    });

So, my onDismiss method is the exact same as my cancel method, because I want to pop a modal from my modals redux state when the users dismiss a modal by panning it down. But when I call onCancel, it also triggers my onDismiss.

So I ended up removing my popModal calls in onConfirm and onCancel, so it gets triggered only when dismissing.

This is the workaround I found, not the best, but it’ll work for now I guess,

Thank you guys for your help,

Cheers 🍻

[pnogier]

@moxspoy thanks for the suggestion, but still doesn’t work…