Action sheet
A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
When to use
- The “more” button of a video, a message, a comment.
- Choosing where a photo comes from: the library or the camera.
When not to use
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { ActionSheet } from "@krizaka/ui/native";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
A video's actions
Share, auction, edit, delete — cancel apart.
Props
A short list of actions from the bottom edge — share, edit, delete — and a cancel button apart, as the platforms do.
| Prop | Type | Default | Description |
|---|---|---|---|
actionsrequired | readonly ActionSheetAction[] | — | The choices, in order. |
cancelLabelrequired | string | — | The cancel button's words (“Cancel”) — passed translated. |
titlerequired | string | — | What the choices are about (“Your video”) — the accessible name. |
defaultOpen | boolean | — | Open at first, uncontrolled. |
description | string | — | One line under the title. |
onOpenChange | ((open: boolean) => void) | — | Called when it opens or closes (the back button, the scrim, an action). |
open | boolean | — | Open (controlled). |
Accessibility
- A
menuofmenuitems named by the title; cancel is a button apart. - A selection tick on each action when the app gives haptics.
Best practices
- Put the destructive action last, in its own words (“Delete the video”).
- Keep it to verbs: share, edit, start an auction.
Related components
Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub