Returning results from ActionSheet

React components are deeply coupled with their local state. However sometimes we want things to work differently and in a more integrated way. Let's look at an example where we need to get a confirmation from user before taking an action.

So we have a function that we can call whenever we are opening an external link from our app.

async function openExternalLink(link: string) {
  const canOpen = await SheetManager.show("confirm-sheet", {
    payload: {
      message: `Do you want to open ${link} in your phone browser?`,
    },
  });
  if (canOpen) {
    Linking.openUrl(link);
  }
}

And in our ConfirmSheet component.

function ConfirmSheet(props: SheetProps<{ message: string }>) {
  return (
    <ActionSheet id={props.sheetId}>
      <Text
        style={{
          marginBottom: 10,
          color: "black",
        }}
      >
        {props.payload?.message}
      </Text>
      <Button
        title="No"
        onPress={() => {
          SheetManager.hide(props.sheetId, {
            payload: false,
          });
        }}
      />
      <Button
        title="Yes"
        onPress={() => {
          SheetManager.hide(props.sheetId, {
            payload: true,
          });
        }}
      />
    </ActionSheet>
  );
}

Chaining

You can also chain showing ActionSheets one after the other using await. Each promise will resolve when the ActionSheet has closed.

let result = await SheetManager.show("sheet-a");
if (result) return await SheetManager.show("sheet-b");
/// and so on.