ActionSheet | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
ActionSheet
An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content.
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. 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.
Nativebase logo
MadeWithNativeBase