Version: Next

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.
import { Actionsheet } from 'native-base';

Examples#

Usage#

Composition#

DisableOverlay#

Icons#

Props#

Actionsheet#

Name Type Description Default
isOpen boolean If true, the ActionSheet will open. Useful for controllable state behaviour -
onClose () => any Callback invoked when the modal is closed -
disableOverlay boolean If true, disables the overlay. false
hideDragIndicator boolean If true, hides the drag indicator. false
_backdrop any Props applied on Overlay. -

Actionsheet implements Box

Actionsheet.Content#

ActionsheetContent implements Box

Actionsheet.Item#

ActionsheetItem implements Button

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of actionsheet
We can easily extend the actionsheet component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Actionsheet: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

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.