ActionSheet

ActionSheetProvider

Important: You should use the AppWrapper component instead, as the ActionSheetProvider is baked in.

In order to be able to use the useActionSheet hook, you need to wrap your app with the App Wrapper, or ActionSheetProvider.

import { ActionSheetProvider } from "reckon-mobile-design-system";
const App = () => {
  return (
    <ActionSheetProvider>
      <AppContainer />
    </ActionSheetProvider>
  );
};
export default App;

useActionSheet()

Create and call an ActionSheet

Note: There can only be one 'isDestructive' button in the list.

import { useActionSheet } from "reckon-mobile-design-system";
const HomeScreen = () => {
  const showActionSheet = useActionSheet([
    {
      label: "Edit",
      onPress: () => console.log("Howdy")
    },
    {
      label: "Duplicate",
      onPress: () => console.log("Hi")
    },
    {
      label: "Delete",
      isDestructive: true,
      onPress: () => console.log("Hi")
    }
  ]);
  return <CircleButton icon="dots" onPress={() => showActionSheet()} />;
};

useActionSheetWithArguments()

In cases where your functions or labels aren't defined when you create the hook, you can use useActionSheetWithArguments instead.

Note: There can only be one 'isDestructive' button in the list.

import { useActionSheet } from "reckon-mobile-design-system";
const HomeScreen = () => {
  const showActionSheet = useActionSheetWithArguments();
  return (
    <CircleButton
      icon="dots"
      onPress={() =>
        showActionSheet([
          {
            label: "Edit",
            onPress: () => console.log("Howdy")
          },
          {
            label: "Duplicate",
            onPress: () => console.log("Hi")
          },
          {
            label: "Delete",
            isDestructive: true,
            onPress: () => console.log("Hi")
          }
        ])
      }
    />
  );
};