ActionSheet | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
ActionSheet
An Actionsheet is a dialog that displays a set of options. It appears on top of the app's content.
Show Code
Playground
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.
Copy
import { Actionsheet } from "native-base";
Examples
Usage
Playground
Composition
Playground
DisableOverlay
Playground
Icons
Playground
Props
Actionsheet
isOpen
If true, the ActionSheet will open. Useful for controllable state behaviour
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
_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. Checkout the default theme of 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.
Nativebase logo
MadeWithNativeBase