Actionsheet
Quickly access options overlaying the app's content for efficient user actions.
Installation
API Reference
This is an illustration of Actionsheet component.
function App() {const [showActionsheet, setShowActionsheet] = React.useState(false)const handleClose = () => setShowActionsheet(false)return (<><Button onPress={() => setShowActionsheet(true)}><ButtonText>Open Actionsheet</ButtonText></Button><Actionsheet isOpen={showActionsheet} onClose={handleClose}><ActionsheetBackdrop /><ActionsheetContent><ActionsheetDragIndicatorWrapper><ActionsheetDragIndicator /></ActionsheetDragIndicatorWrapper><ActionsheetItem onPress={handleClose}><ActionsheetItemText>Edit Message</ActionsheetItemText></ActionsheetItem><ActionsheetItem onPress={handleClose}><ActionsheetItemText>Mark Unread</ActionsheetItemText></ActionsheetItem><ActionsheetItem onPress={handleClose}><ActionsheetItemText>Remind Me</ActionsheetItemText></ActionsheetItem><ActionsheetItem onPress={handleClose}><ActionsheetItemText>Add to Saved Items</ActionsheetItemText></ActionsheetItem><ActionsheetItem isDisabled onPress={handleClose}><ActionsheetItemText>Delete</ActionsheetItemText></ActionsheetItem></ActionsheetContent></Actionsheet></>)}
Installation
CLI
Manual
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.
import {Actionsheet,ActionsheetBackdrop,ActionsheetContent,ActionsheetDragIndicator,ActionsheetDragIndicatorWrapper,ActionsheetItem,ActionsheetItemText,ActionsheetIcon,} from "@/components/ui/actionsheet"
export default () => (<Actionsheet><ActionsheetBackdrop /><ActionsheetContent><ActionsheetDragIndicatorWrapper><ActionsheetDragIndicator /></ActionsheetDragIndicatorWrapper><ActionsheetItem><ActionsheetItemText /></ActionsheetItem></ActionsheetContent></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.
Prop | Type | Default | Description |
---|---|---|---|
isOpen | boolean | - | If true, the Actionsheet will open. Useful for controllable state behavior. |
onClose | () => any | - | Callback invoked when the Actionsheet is closed. |
onOpen | () => any | - | Callback invoked when the Actionsheet is opened. |
useRNModal | boolean | false | If true, renders react-native native modal. |
defaultIsOpen | boolean | - | Specifies the default open state of the Actionsheet |
initialFocusRef | React.RefObject<any> | - | The ref of element to receive focus when the Actionsheet opens. |
finalFocusRef | React.RefObject<any> | - | The ref of element to receive focus when the Actionsheet closes |
closeOnOverlayClick | boolean | - | If true, the Actionsheet will close when the overlay is clicked. |
isKeyboardDismissable | boolean | - | If true, the keyboard can dismiss the Actionsheet |
trapFocus | boolean | true | If true, creates a focus scope containing all elements within the Actionsheet content. |
children | any | - | The content to display inside the Actionsheet |
snapPoints | Array<number> | [50] | The snap points for the Actionsheet The Actionsheet will snap to the point closest to its current position. The default value is 50% of the screen height. The value should be between 0 and 100. Currently, only one snap point is supported. We plan to support multiple snap points in the future. |
preventScroll | boolean | true | If true, scroll will be prevented when the Actionsheet is open. |
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
function App() {const [showActionsheet, setShowActionsheet] = React.useState(false)const handleClose = () => setShowActionsheet(false)return (<><Button onPress={() => setShowActionsheet(true)}><ButtonText>Open</ButtonText></Button><KeyboardAvoidingViewbehavior={Platform.OS === "ios" ? "padding" : undefined}><Actionsheet isOpen={showActionsheet} onClose={handleClose}><ActionsheetBackdrop /><ActionsheetContent className=""><ActionsheetDragIndicatorWrapper><ActionsheetDragIndicator /></ActionsheetDragIndicatorWrapper><VStack className="w-full pt-5"><HStack space="md" className="justify-center items-center"><Box className="w-[50px] h-full px-2 border border-solid border-outline-300 rounded-sm"><Imagesource={{ uri: "https://i.imgur.com/UwTLr26.png" }}resizeMode="contain"className="flex-1"/></Box><VStack className="flex-1"><Text className="font-bold">Mastercard</Text><Text>Card ending in 2345</Text></VStack></HStack><FormControl className="mt-[36px]"><FormControlLabel><FormControlLabelText>Confirm security code</FormControlLabelText></FormControlLabel><Input className="w-full"><InputSlot><InputIcon as={CreditCardIcon} className="ml-2" /></InputSlot><InputField placeholder="CVC/CVV" /></Input><Button onPress={handleClose} className="mt-3"><ButtonText className="flex-1">Pay $1000</ButtonText></Button></FormControl></VStack></ActionsheetContent></Actionsheet></KeyboardAvoidingView></>)}
With SnapPoints
function App() {const [showActionsheet, setShowActionsheet] = React.useState(false)