Action Sheet

A native-feeling action sheet component that provides a menu of options triggered from the bottom of the screen.

Installation


pnpm dlx bna-ui add action-sheet

Usage

import { ActionSheet, useActionSheet } from '@/components/ui/action-sheet';

Basic Usage with Hook

function MyComponent() {
  const { show, ActionSheet } = useActionSheet();
 
  const handleShowActionSheet = () => {
    show({
      title: 'Choose an option',
      options: [
        {
          title: 'Edit',
          onPress: () => console.log('Edit pressed'),
        },
        {
          title: 'Delete',
          onPress: () => console.log('Delete pressed'),
          destructive: true,
        },
      ],
    });
  };
 
  return (
    <>
      <Button onPress={handleShowActionSheet}>Show Action Sheet</Button>
      {ActionSheet}
    </>
  );
}

Direct Component Usage

<ActionSheet
  visible={isVisible}
  onClose={() => setIsVisible(false)}
  title='Choose an action'
  message='Select one of the options below'
  options={[
    {
      title: 'Share',
      onPress: handleShare,
      icon: <ShareIcon />,
    },
    {
      title: 'Delete',
      onPress: handleDelete,
      destructive: true,
    },
  ]}
/>

Examples

Default

With Icons

Destructive Actions

Disabled Options

Custom Styling

Long Options List

With Hook

API Reference

ActionSheet

The main ActionSheet component.

Prop	Type	Default	Description
`visible`	`boolean`	-	Controls the visibility of the action sheet.
`onClose`	`() => void`	-	Callback fired when the action sheet should close.
`title`	`string`	-	Optional title displayed at the top.
`message`	`string`	-	Optional message displayed below the title.
`options`	`ActionSheetOption[]`	-	Array of options to display in the action sheet.
`cancelButtonTitle`	`string`	`'Cancel'`	Text for the cancel button.
`style`	`ViewStyle`	-	Additional styles for the action sheet container.

ActionSheetOption

Configuration for individual action sheet options.

Prop	Type	Default	Description
`title`	`string`	-	The text to display for this option.
`onPress`	`() => void`	-	Callback fired when this option is pressed.
`destructive`	`boolean`	`false`	Whether this option should use destructive styling.
`disabled`	`boolean`	`false`	Whether this option should be disabled.
`icon`	`React.ReactNode`	-	Optional icon to display next to the title.

useActionSheet Hook

A convenient hook for managing action sheet state.

Returns

Property	Type	Description
`show`	`(config: Omit<ActionSheetProps, 'visible' \| 'onClose'>) => void`	Function to show the action sheet.
`hide`	`() => void`	Function to hide the action sheet.
`ActionSheet`	`React.ReactElement`	The ActionSheet component to render.
`isVisible`	`boolean`	Current visibility state.

Platform Behavior

iOS

On iOS, the ActionSheet automatically uses the native ActionSheetIOS API, providing the familiar iOS action sheet experience with proper integration into the system UI.

Android & Other Platforms

On Android and other platforms, a custom implementation is used that mimics the native behavior with smooth animations and proper theming support.

Accessibility

The ActionSheet component follows accessibility best practices:

Proper focus management when opened/closed
Screen reader announcements for destructive actions
Keyboard navigation support where applicable
Respects system accessibility settings

Animation

The ActionSheet includes smooth animations:

Slide-up animation from bottom of screen
Backdrop fade-in/out
Spring-based animations for natural feel
Respects reduced motion preferences

Theming

The ActionSheet automatically adapts to your app's theme:

Uses theme colors for background, text, and borders
Supports both light and dark modes
Destructive actions use theme's destructive color
Disabled states respect theme opacity values

Accordion Alert