Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
ActionSheet
An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content.
Show Code
Playground
Import
NativeBase exports 3 modal-related components:
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
Actionsheet.Content
Actionsheet.Item
ActionsheetItem 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