The action sheet does not close if there is another action sheet open below it

[eleversa]

When I open an action sheet and then through a button I open another, this second one does not close.

This code is totally ignored---> SheetManager.hide('action-sheet-id');

If I use them independently, they both close correctly.

I am using the same action sheet manager to manage them.

Can anybody help me?

[adhamhassan99]

Can you try to Async await each sheetManager call ? for example :

await sheetManager.hide('first_sheet')
await sheetManager.show('second_sheet')

[eleversa]

Of course, I've tried. It seems that the promise of closing the second action sheet never ends. In any case, I have changed the application a bit so that I don't have to use two action sheets at the same time. Thank you anyway.

[rvenky125]

is there any workaround?

[joe-yeomans]

I am also getting this issue. Trying to find a workaround for it.

[johnny-mcfadden-dailypay]

From my extensive use of this library you can only have one action sheet open at a given time. You should always make sure to close any currently open action sheet before opening another. You should do this by awaiting the hide from the sheet manger call as called out above:

await sheetManager.hide('first_sheet')
sheetManager.show('second_sheet')

I've also add a small lock mechanism to only allow one sheet to be open at a time as i've noticed an app can freeze if another action sheet is opened before another is fully closed (a long standing problem with modals in react native).

// keep locally scoped within the module
let currentActionSheetIdOpen: SheetManagerSheets | undefined;

export const updateCurrentActionSheetIdOpen = (id: SheetManagerSheets | undefined) => {
  currentActionSheetIdOpen = id;
};

export const getCurrentActionSheetIdOpen = () => currentActionSheetIdOpen;

interface ActionSheetShowHideArguments<T> {
  id: SheetManagerSheets;
  props?: T;
  context?: SheetProviderContexts;
}

const showActionSheet = <T>({
  id,
  props,
  context = SheetProviderContexts.global,
}: ActionSheetShowHideArguments<T>) => {
  if (!getCurrentActionSheetIdOpen()) {
    SheetManager.show(id, {
      payload: { ...props },
      context,
    });
  }

  updateCurrentActionSheetIdOpen(id);
};

const hideActionSheet = <T>({
  id,
  props,
  context = SheetProviderContexts.global,
}: ActionSheetShowHideArguments<T>): Promise<{ props: T | undefined }> => {

  updateCurrentActionSheetIdOpen(undefined);

  return SheetManager.hide(id, {
    payload: { props },
    context,
  });
};

[Kreshnik]

I am encountering the same issue; when opening two ActionSheets simultaneously, I need the topmost one to close, but that's not happening. Has anyone found a solution to this problem?

[devphilipcesar]

instead of using

await SheetManager.hide('modalId')

when hiding the actionsheet on top of the existing opened actionsheet. You need to use the actionSheetRef approach. In this way you can always dismiss the top most actionsheet.

function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  const onClose = async () => {
    await actionSheetRef.current?.hide();
  };

  return (
    <ActionSheet ref={actionSheetRef}>
      <Text>Hi, I am here.</Text>
    </ActionSheet>
  );
}