ActionSheet

Discover the ActionSheet component for Expo, React & React Native. Easily create intuitive action sheets in your app with gluestack-ui. Learn more in our detailed documentation! This is an illustration of ActionSheet component.

Installation

Run the following command:

npx gluestack-ui add actionsheet

API Reference

To use this component in your project, include the following import statement in your file. 
export default () => (
  <Actionsheet>
    <ActionsheetBackdrop />
    <ActionsheetContent>
      <ActionsheetDragIndicatorWrapper>
        <ActionsheetDragIndicator />
      </ActionsheetDragIndicatorWrapper>
      <ActionsheetItem>
        <ActionsheetItemText />
      </ActionsheetItem>
    </ActionsheetContent>
  </Actionsheet>
);


import {
  Actionsheet,
  ActionsheetBackdrop,
  ActionsheetContent,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetIcon,
} from '@/components/ui/actionsheet';

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Actionsheet

It inherits all the properties of React Native's View component.
NameTypeDefaultDescription
isOpen
booleanfalseWhether the actionsheet is open.
onClose
() => void-Callback function when the actionsheet is closed.
snapPoints
number[]-Array of numbers representing the snap points in percentage.
initialFocusRef
React.RefObject<any>-Ref for the element that should be focused when the actionsheet opens.
finalFocusRef
React.RefObject<any>-Ref for the element that should be focused when the actionsheet closes.
Important Note
Note: If snapPoints are not provided to Actionsheet, then it's essential to set maxHeight to ActionsheetContent.

ActionsheetBackdrop

It is React Native's Pressable component, created using @legendapp/motion's
createMotionAnimatedComponent
function to add animation to the component. You can use any declarative animation library you prefer.

ActionsheetContent

It inherits all the properties of @legendapp/motion's Motion.View component. With this Actionsheet component, you have the flexibility to use any declarative animation library that suits your needs.

ActionsheetDragIndicatorWrapper

It inherits all the properties of React Native's View component.

ActionsheetDragIndicator

It inherits all the properties of React Native's View component.

ActionsheetItem

It inherits all the properties of React Native's Pressable component.

ActionsheetItemText

It inherits all the properties of React Native's Text component.

ActionsheetIcon

It inherits all the properties of React Native's View component.

ActionsheetScrollView

It inherits all the properties of React Native's ScrollView component.

ActionsheetVirtualizedList

It inherits all the properties of React Native's VirtualizedList component.

ActionsheetFlatList

It inherits all the properties of React Native's FlatList component.

ActionsheetSectionList

It inherits all the properties of React Native's SectionList component.

ActionsheetSectionHeaderText

It inherits all the properties of React Native's Text component.
Important Note
Note: While our Actionsheet component supports both ActionsheetScrollView and ActionsheetVirtualizedList, we recommend using VirtualizedList for better performance on large lists of items. The ScrollView option may cause performance issues on lists with many items.

Features

  • 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
  • Clicking on the overlay closes the Actionsheet
  • Scrolling is blocked on the elements behind the Actionsheet

Accessibility

We have outlined the various features that ensure the Actionsheet component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

Keyboard

  • Tab + Enter
    : Triggers the actionsheet action.

Screen Reader

  • VoiceOver: When the ActionSheet is focused, the screen reader will announce the button name. After entering the ActionSheet, it will read the content of the ActionSheet items.

Keyboard

  • Space
    : Opens the actionsheet.
  • Enter
    : Opens/closes the actionsheet.
  • Tab
    : Moves focus to the next focusable element.
  • Shift + Tab
    : Moves focus to the previous focusable element.
  • Esc
    : Closes the actionsheet.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Keyboard handling

Demonstrates a common UI pattern known as keyboard handling or keyboard scrolling, in which an input field is automatically scrolled into view when the user taps on it and the keyboard appears. This improves usability and ensures that the input field is always visible and accessible, even when the keyboard is blocking part of the screen.

Without SnapPoints

With SnapPoints

Selection with State Persistence

This example demonstrates proper state handling when closing the actionsheet via drag gesture. Users can select a notification preference, and the selection is correctly saved whether they close by dragging or clicking the backdrop.

Selection with State Persistence

Icons

The Actionsheet with Icons is a variation of the Actionsheet component that displays icons next to each option. It's commonly used in apps for a more visual representation of options and easier navigation.

VirtualizedList

The Actionsheet with Virtualized List includes a virtualized list for better performance when displaying a large number of options. It's commonly used in apps with long lists of options for an improved user experience.

FlatList

The Actionsheet with Flat List is a variation of the Actionsheet component that displays a flat list of options. It's commonly used in apps for a simple and straightforward display of options to the user.

SectionList

The Actionsheet with SectionList is a variation of the Actionsheet component that displays a sectioned list of options. It's commonly used in apps to organize options into different categories or sections for better readability and navigation.

File Upload with Actionsheet

Edit this page on GitHub
Go backTooltip
Up nextAccordion