SheetManager

SheetManager is used to control all action sheets globally. It requires an id prop set on the action sheet you want to control.

show

Shows the action sheet with the given id with the provided options.

Parameters:

id

An id of the action sheet you want to show.

options

SheetManager.show("example-sheet");

This method is async. It resolves when the action sheet closes. It can return a result from the action sheet if needed.

const confirmed = await SheetManager.show("confirm-sheet");

You can also send some data to the action sheet. This data will be availble in the action sheet component.

const confirmed = await SheetManager.show("confirm-sheet", {
  payload: { message: "Do you want to open this link?" },
});

hide

Hide the action sheet with the given id.

Parameters:

id

An id of the action sheet you want to hide.

options

SheetManager.hide("example-sheet");

The hide function takes an optional data parameter which can be used to return some data to the caller, i.e the function that called SheetManager.show initially.

SheetManager.hide("example-sheet", {
  payload: { confirmed: true },
});

hideAll

Hide all the action sheets that are currently opened.

SheetManager.hideAll();

get

Gives you the internal ref for the action sheet which can then be used to invoke methods in ActionSheetRef

Parameters:

id

An id of the action sheet you want to hide.

context

If the action sheet you want to get exists in a specific SheetProvider, pass it's context along to get the correct ref.

SheetManager.get("example-sheet")?.snapToOffset(25);
// or inside some modal with it's own `SheetProvider`
SheetManager.get("example-sheet", "local-context")?.snapToOffset(25);