BottomSheetModal dismisses parent modal when opening a second modal (is stack modals supported?)

[talhazi]

Description:
I'm using BottomSheetModal in my Expo app and trying to open a second modal (OrderNotesModal) from within the first (DraftOrderModal). However, opening OrderNotesModal causes DraftOrderModal to close.

Expected Behavior
OrderNotesModal should open on top of DraftOrderModal without dismissing it.

Reproduction Code:

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

const OrderScreen: React.FC = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  const bottomSheetModalRefOrderNotes = useRef<BottomSheetModal>(null);

  return (
    <BottomSheetModalProvider>
      <DraftOrderModal bottomSheetModalRef={bottomSheetModalRef} />
      <OrderNotesModal bottomSheetModalRef={bottomSheetModalRefOrderNotes} />
    </BottomSheetModalProvider>
  );
};

const OrderNotesModal: React.FC<OrderNotesModalProps> = ({
  bottomSheetModalRef,
  onClose,
}) => {
  const renderBackdrop = useCallback(
    (
      props: React.JSX.IntrinsicAttributes & BottomSheetDefaultBackdropProps,
    ) => (
      <BottomSheetBackdrop
        {...props}
        opacity={0.45}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        pressBehavior='close'
      />
    ),
    [],
  );

  const snapPointsProductModal = useMemo(() => ['35%', '35%'], []);

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      index={1}
      snapPoints={snapPointsProductModal}
      backdropComponent={renderBackdrop}
      handleComponent={null} // Remove the handle indicator
      onDismiss={onClose}
    >
      <BottomSheetView style={styles.contentContainer}>
        {/* Close Button */}
        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
          <Ionicons name='close' size={width * 0.05} color={'#3a3b3f'} />
        </TouchableOpacity>
        <View style={styles.handleIndicator} />

        {/* Modal Content */}
        <View style={styles.OrderNotesModalContent}>
          <Text style={styles.title}>הוספת הערה לספק</Text>
        </View>
      </BottomSheetView>
    </BottomSheetModal>
  );
};

Would appreciate any guidance on resolving this. Thanks! 🙏

[github-actions]

Hello @talhazi 👋, this issue is being automatically closed and locked because it does not follow the issue template.