ActionSheet | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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 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 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
_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.
Nativebase logo
MadeWithNativeBase