ActionSheet | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

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
function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose}>
        <Actionsheet.Content>
          <Actionsheet.Item>Option 1</Actionsheet.Item>
          <Actionsheet.Item>Option 2</Actionsheet.Item>
          <Actionsheet.Item>Option 3</Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose}>
        <Actionsheet.Content>
          <Actionsheet.Item>Option 1</Actionsheet.Item>
          <Actionsheet.Item>Option 2</Actionsheet.Item>
          <Actionsheet.Item>Option 3</Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}

Composition


Playground
function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose}>
        <Actionsheet.Content>
          <Divider borderColor="gray.300" />
          <Actionsheet.Item _text={{
          color: "blue.500"
        }}>
            Save
          </Actionsheet.Item>
          <Divider borderColor="gray.300" />
          <Actionsheet.Item _text={{
          color: "blue.500"
        }}>
            Delete
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose}>
        <Actionsheet.Content>
          <Divider borderColor="gray.300" />
          <Actionsheet.Item _text={{
          color: "blue.500"
        }}>
            Save
          </Actionsheet.Item>
          <Divider borderColor="gray.300" />
          <Actionsheet.Item _text={{
          color: "blue.500"
        }}>
            Delete
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}

DisableOverlay


Playground
function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose} disableOverlay>
        <Actionsheet.Content>
          <Actionsheet.Item>Option 1</Actionsheet.Item>
          <Actionsheet.Item>Option 2</Actionsheet.Item>
          <Actionsheet.Item>Option 3</Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose} disableOverlay>
        <Actionsheet.Content>
          <Actionsheet.Item>Option 1</Actionsheet.Item>
          <Actionsheet.Item>Option 2</Actionsheet.Item>
          <Actionsheet.Item>Option 3</Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}

Icons


Playground
function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose} size="full">
        <Actionsheet.Content>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="share" />} color="muted.500" mr={3} />}>
            Share
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialCommunityIcons name="link" />} color="muted.500" mr={3} />}>
            Link
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="edit" />} color="muted.500" mr={3} />}>
            Edit name
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="delete" />} color="muted.500" mr={3} />}>
            Delete Collection
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}function Example() {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <>
      <Button onPress={onOpen}>Actionsheet</Button>

      <Actionsheet isOpen={isOpen} onClose={onClose} size="full">
        <Actionsheet.Content>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="share" />} color="muted.500" mr={3} />}>
            Share
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialCommunityIcons name="link" />} color="muted.500" mr={3} />}>
            Link
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="edit" />} color="muted.500" mr={3} />}>
            Edit name
          </Actionsheet.Item>
          <Actionsheet.Item startIcon={<Icon as={<MaterialIcons name="delete" />} color="muted.500" mr={3} />}>
            Delete Collection
          </Actionsheet.Item>
        </Actionsheet.Content>
      </Actionsheet>
    </>;
}