ActionSheet | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
Migration
If you are starting a new project, please try gluestack-ui for better performance and new design.
ActionSheet
An Actionsheet is a dialog that displays a set of options. It appears on top of the app's content.
Show Codefunction Example() {const {isOpen,onOpen,onClose} = useDisclose();return <><Button onPress={onOpen} shadow={2}>Actionsheet</Button><Actionsheet isOpen={isOpen} onClose={onClose}><Actionsheet.Content><Box w="100%" h={60} px={4} justifyContent="center"><Text fontSize="16" color="gray.500" _dark={{color: "gray.300"}}>Albums</Text></Box><Actionsheet.Item>Delete</Actionsheet.Item><Actionsheet.Item>Share</Actionsheet.Item><Actionsheet.Item>Play</Actionsheet.Item><Actionsheet.Item>Favourite</Actionsheet.Item><Actionsheet.Item>Cancel</Actionsheet.Item></Actionsheet.Content></Actionsheet></>;}
Import
Actionsheet: Provides the context and state for all components.
Actionsheet.Content: Component to wrap the list of Actionsheet.Item components.
Actionsheet.Item: A button to wrap the options of the Actionsheet.
Copyimport { Actionsheet } from "native-base";
Examples
Usage
Playgroundfunction Example() {const {isOpen,onOpen,onClose} = useDisclose();return <Center><Button onPress={onOpen}>Actionsheet</Button><Actionsheet isOpen={isOpen} onClose={onClose}><Actionsheet.Content><Box w="100%" h={60} px={4} justifyContent="center"><Text fontSize="16" color="gray.500" _dark={{color: "gray.300"}}>Albums</Text></Box><Actionsheet.Item>Delete</Actionsheet.Item><Actionsheet.Item isDisabled>Share</Actionsheet.Item><Actionsheet.Item>Play</Actionsheet.Item><Actionsheet.Item>Favourite</Actionsheet.Item><Actionsheet.Item>Cancel</Actionsheet.Item></Actionsheet.Content></Actionsheet></Center>;}
Composition
Playgroundfunction Example() {const {isOpen,onOpen,onClose} = useDisclose();return <Center><Button onPress={onOpen}>Actionsheet</Button><Actionsheet isOpen={isOpen} onClose={onClose} hideDragIndicator><Actionsheet.Content borderTopRadius="0"><Box w="100%" h={60} px={4} justifyContent="center"><Text fontSize="16" color="gray.500" _dark={{color: "gray.300"}}>Albums</Text></Box><Actionsheet.Item>Delete</Actionsheet.Item><Actionsheet.Item>Share</Actionsheet.Item><Actionsheet.Item>Play</Actionsheet.Item><Actionsheet.Item>Favourite</Actionsheet.Item><Actionsheet.Item>Cancel</Actionsheet.Item></Actionsheet.Content></Actionsheet></Center>;}
DisableOverlay
Playgroundfunction Example() {const {isOpen,onOpen,onClose} = useDisclose();return <Center><Button onPress={onOpen}>Actionsheet</Button><Actionsheet isOpen={isOpen} onClose={onClose} disableOverlay><Actionsheet.Content><Box w="100%" h={60} px={4} justifyContent="center"><Text fontSize="16" color="gray.500" _dark={{color: "gray.300"}}>Albums</Text></Box><Actionsheet.Item>Delete</Actionsheet.Item><Actionsheet.Item>Share</Actionsheet.Item><Actionsheet.Item>Play</Actionsheet.Item><Actionsheet.Item>Favourite</Actionsheet.Item><Actionsheet.Item>Cancel</Actionsheet.Item></Actionsheet.Content></Actionsheet></Center>;}
Icons
Playgroundfunction Example() {const {isOpen,onOpen,onClose} = useDisclose();return <Center><Button onPress={onOpen}>Actionsheet</Button><Actionsheet isOpen={isOpen} onClose={onClose} size="full"><Actionsheet.Content><Box w="100%" h={60} px={4} justifyContent="center"><Text fontSize="16" color="gray.500" _dark={{color: "gray.300"}}>Albums</Text></Box><Actionsheet.Item startIcon={<Icon as={MaterialIcons} size="6" name="delete" />}>Delete</Actionsheet.Item><Actionsheet.Item startIcon={<Icon as={MaterialIcons} name="share" size="6" />}>Share</Actionsheet.Item><Actionsheet.Item startIcon={<Icon as={Ionicons} name="play-circle" size="6" />}>Play</Actionsheet.Item><Actionsheet.Item startIcon={<Icon as={MaterialIcons} size="6" name="favorite" />}>Favourite</Actionsheet.Item><Actionsheet.Item startIcon={<Icon viewBox="0 0 24 24" size="6" fill="none"><Path d="M12.0007 10.5862L16.9507 5.63623L18.3647 7.05023L13.4147 12.0002L18.3647 16.9502L16.9507 18.3642L12.0007 13.4142L7.05072 18.3642L5.63672 16.9502L10.5867 12.0002L5.63672 7.05023L7.05072 5.63623L12.0007 10.5862Z" /></Icon>}>Cancel</Actionsheet.Item></Actionsheet.Content></Actionsheet></Center>;}
Props
Actionsheet
Actionsheet implements , , , , , , , , ,
isOpen
If true, the ActionSheet will open. Useful for controllable state behavior.
Type: boolean
onClose
Callback invoked when the modal is closed.
Type: () => any
disableOverlay
If true, disables the overlay.
Type: boolean
Default: false
hideDragIndicator
If true, hides the drag indicator.
Type: boolean
Default: false
_backdrop
Props applied on Overlay.
Type: any
useRNModal
Type: boolean
Actionsheet.Content
ActionsheetContent implements , , , , , , , , ,
_dragIndicatorWrapperOffSet
Props applied on area above actionsheet content.
Type: InterfaceBoxProps<IActionsheetContentProps>
_dragIndicatorWrapper
Props applied on area around drag indicator.
Type: InterfaceBoxProps<IActionsheetContentProps>
_dragIndicator
Props applied on drag indicator.
Type: InterfaceBoxProps<IActionsheetContentProps>
Actionsheet.Item
Actionsheet.Item implements
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the actionsheet.
Info: We can easily extend the actionsheet component theme using extendTheme function as described in the documentation .
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.
MadeWithNativeBase