Version: 3.0.0-next.40

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: Wrapper for the Actionsheet.Header and 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

Actionsheet implements Box

Actionsheet.Content#

ActionsheetContent implements Box

Actionsheet.Item#

ActionsheetItem implements Button

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.