[Bug]: cannot close and reopen modal

[alainib]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

i use a unique bottom sheet to display some given child content,
i a given situation, i need to update the whole content of the modal
for example user is in a preview modal who display a picture with a message (like "woow some one send you a gift") , then when we press "ok show it" button it should open a modal with another kind of content.

on android it work smooth, i open the modal with first type, close it, re present it with another data and it work. on ios noo, it display at first time , and the second time no. i have to put "settimeout" with 1000ms to make it work . not best approche and maybe on slow device it's not enough

for this i use this mmkv context

import {createRef} from 'react';
import {create} from 'zustand';
import {InfoModalState, InfoModalProps} from '@types';
import {BottomSheetModal} from '@gorhom/bottom-sheet';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const useInfoModalStore = create<InfoModalState>()((set, get, api) => ({
  infoModalRef: createRef<BottomSheetModal>(),
  showInfoModal: props => {
    const {infoModalRef} = get();
    if (infoModalRef?.current) {
      infoModalRef.current.present(props);
    }
  },
  closeInfoModal: () => {
    const {infoModalRef} = get();
    if (infoModalRef?.current) {
      infoModalRef.current.close();
    }
  }, 
}));

export const showInfoModal = (props: InfoModalProps) => {
  useInfoModalStore?.getState()?.showInfoModal?.(props);
};

export const closeInfoModal = () => {
  useInfoModalStore?.getState()?.closeInfoModal?.();
};

and call it like this

import {showInfoModal, closeInfoModal} from 'stores/infoModal';

showInfoModal({
          type: 'displaypreviewcard',
          message: order_item?.message,
          image: order_item?.image,
          sender: order_item?.sender,
          onClose: () => { 
            closeInfoModal();
            setTimeout(() => {
             showInfoModal({
                    type: 'info',
                    title: translateText('Super'),                  
                    children,
                    buttons: [{text: 'Dépenser'  } ],                 
                  });
            }, 1000);
          },
        });

i'm trying to use promised or chained call to make it work better like this

reloadInfoModal: () => {
const {infoModalRef} = get();
if (infoModalRef?.current) {
infoModalRef.current.close().then(() => {
infoModalRef.current.present(props);
});
}
}

any tips or good practise ? thank you very much

Reproduction steps

import {BottomSheetModal, BottomSheetBackdrop} from '@gorhom/bottom-sheet';


 <BottomSheetModal
      enableContentPanningGesture={false}
      enableHandlePanningGesture={false}
      enablePanDownToClose={false}
      enableDynamicSizing={false}
      handleIndicatorStyle={{display: 'none'}}
      ref={infoModalRef} 
      onChange={handleSheetChanges}
      snapPoints={snapPoints}
      backgroundStyle={backgroundStyle}>
      {({data}) => renderChildren({displayed, data})}
    </BottomSheetModal>

call this two function is short time , present will no reopen the modal

• infoModalRef.current.close();
• infoModalRef.current.present(props);

Reproduction sample

https://snack.expo.dev/8wJnJ--U_dbI4L3mVIFeV