---
title: Actionsheet | UI
description: A Actionsheet component is used to create clickable elements that perform an action when pressed.
pageTitle: Actionsheet
pageDescription: A Actionsheet component is used to create clickable elements that perform an action when pressed.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Disclosure/Actionsheet" />

import { Actionsheet, Pressable, Text as ActionsheetText } from './Actionsheet';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  InlineCode,
  AddIcon,
  InfoIcon,
} from '@gluestack/design-system';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Actionsheet` component to your project.

```jsx
npx install @gluestack-ui add actionsheet
```

## Import

```jsx
// import the component from your component folder
import { Actionsheet } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function App(){
  const [showActionsheet, setShowActionsheet] = React.useState(false);
  const handleClose = () => setShowActionsheet(!showActionsheet);
    return (
    <Wrapper>
      <Pressable onPress={handleClose}>
        <Text>Open</Text>
      </Pressable>
      <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <Actionsheet.Backdrop />
        <Actionsheet.Content>
          <Actionsheet.DragIndicatorWrapper>
            <Actionsheet.DragIndicator />
          </Actionsheet.DragIndicatorWrapper>
          <Actionsheet.Item>
            <Actionsheet.ItemText>Community</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item>
            <Actionsheet.ItemText>Plugins</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item>
            <Actionsheet.ItemText>Theme</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item>
            <Actionsheet.ItemText>Settings</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item>
            <Actionsheet.ItemText>Add account</Actionsheet.ItemText>
          </Actionsheet.Item>
          <Actionsheet.Item onPress={handleClose}>
            <Actionsheet.ItemText>Close</Actionsheet.ItemText>
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </Wrapper>
  );
}
`,
      scope: {
        Wrapper,
        Pressable,
        Actionsheet,
        Text: ActionsheetText,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The actionsheet component consists of the following parts:

```jsx
export default () => (
  <Actionsheet>
    <Actionsheet.Backdrop />
    <Actionsheet.Content>
      <Actionsheet.DragIndicatorWrapper>
        <Actionsheet.DragIndicator />
      </Actionsheet.DragIndicatorWrapper>
      <Actionsheet.Item>
        <Actionsheet.ItemText></Actionsheet.ItemText>
      </Actionsheet.Item>
    </Actionsheet.Content>
  </Actionsheet>
);
```

## API Reference

### Actionsheet

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<AppProvider>
  <Table>
    <Table.THead>
      <Table.TR>
        <Table.TH>
          <Table.TText>Prop</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Type</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Default</Table.TText>
        </Table.TH>
        <Table.TH>
          <Table.TText>Description</Table.TText>
        </Table.TH>
      </Table.TR>
    </Table.THead>
    <Table.TBody>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isOpen</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the ActionSheet will open. Useful for controllable state behavior.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>onClose</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`() => any`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>Callback invoked when the modal is closed.</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>useRNModal</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>false</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, renders react-native native modal.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>defaultIsOpen</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the default open state of the ActionSheet.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>avoidKeyboard</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the ActionSheet will avoid the keyboard.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>closeOnOverlayClick</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the ActionSheet will close when the overlay is clicked.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>isKeyboardDismissable</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>boolean</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`If true, the keyboard can dismiss the ActionSheet.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>animationPreset</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`'slide' | 'fade'`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`'slide'`}</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the animation preset for the ActionSheet.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>contentSize</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`Specifies the content size for the ActionSheet.`}</Table.TText>
        </Table.TD>
      </Table.TR>
      <Table.TR>
        <Table.TD>
          <Table.TText>
            <InlineCode>children</InlineCode>
          </Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>any</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>-</Table.TText>
        </Table.TD>
        <Table.TD>
          <Table.TText>{`The content to display inside the ActionSheet.`}</Table.TText>
        </Table.TD>
      </Table.TR>
    </Table.TBody>
  </Table>
</AppProvider>

### Actionsheet.Backdrop

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### Actionsheet.Content

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### Actionsheet.DragIndicatorWrapper

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### Actionsheet.DragIndicator

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### Actionsheet.Item

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component.

### Actionsheet.ItemText

It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.

## Accessibility

- ActionSheet has aria-modal set to true.
- ActionSheet has role set to dialog.
- When the ActionSheet opens, focus is trapped within it.
- Pressing Esc closes the ActionSheet.
- When the ActionSheet opens, focus is automatically set to the first enabled element.
- Clicking on the overlay closes the ActionSheet.
- Scrolling is blocked on the elements behind the ActionSheet.

## Dependencies

- `@gluestack-ui/utils`
- `@react-native-aria/focus`
- `react-native-svg`
- `@gluestack-ui/hooks`
- `@gluestack-ui/overlay`
- `@gluestack-ui/transitions`
- `@gluestack-ui/react-native-aria`

<br />
<br />

# Advanced

## Customizing the Actionsheet

We have a function called `createActionsheet` which can be used to create a custom actionsheet component. This function takes in a configuration object which contains the styled components that you want to use for the actionsheet. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import {
  Root,
  Content,
  Item,
  ItemText,
  DragIndicator,
  IndicatorWrapper,
  Backdrop,
} from '../components/core/actionsheet/styled-components';

// import the createActionsheet function
import { createActionsheet } from '@gluestack-ui/actionsheet';

// Understanding the API
const Actionsheet = createActionsheet({
  Root,
  Content,
  Item,
  ItemText,
  DragIndicator,
  IndicatorWrapper,
  Backdrop,
});

// Using the actionsheet component
export default () => (
  <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
    <Actionsheet.Backdrop />
    <Actionsheet.Content>
      <Actionsheet.DragIndicatorWrapper>
        <Actionsheet.DragIndicator />
      </Actionsheet.DragIndicatorWrapper>
      <Actionsheet.Item onPress={handleClose}>
        <Actionsheet.ItemText>Community</Actionsheet.ItemText>
      </Actionsheet.Item>
    </Actionsheet.Content>
  </Actionsheet>
);
```

Default styling of all these components can be found in the `components/core/actionsheet` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Actionsheet/index.tsx) of the styled `Actionsheet` components.