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.

Type	Required
string	true

options

Type	Required
ShowOptions	false

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.

Type	Required
string	true

options

Type	Required
HideOptions	false

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},
});

update

Update an active ActionSheet with new payload or override it's props.

Parameters:

id

An id of the action sheet.

Type	Required
string	true

options

Type	Required
UpdateOptions	true

SheetManager.update('payload', {
  payload: {
    candy: 'Chocolate',
  },
});

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.

Type	Required
string	true

context

If the action sheet you want to get exists in a specific SheetProvider, pass it's context along to get the correct ref. Normally this returns the top-most rendered sheet ref automatically.

Type	Required
string	false

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

getActiveSheets

Get all active sheets for a given sheet id.

Parameters:

id

An id of the action sheet.

Type	Required
string	true

const activeSheets = SheetManager.getActiveSheets('example-sheet');
for (const sheet of activeSheets) {
  if (sheet.ref.current.currentPayload().id === 'custom-id') {
    sheet.ref.current.hide();
  }
}