useDisclose | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Creating a Universal App with NativeBase and Solito

New

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

New

Responsive

Features

Utility Props

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

Recipes

Designs

Forms

Layout

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack instead.

Explore gluestack

Know More

useDisclose

useDisclose handles common open, close, or toggle scenarios and can control feedback components such as Modal, AlertDialog, Drawer, etc.

Import

Copy
import { useDisclose } from 'native-base';

Example


Playground
const Example = () => {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <Center>
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Content>
          <Modal.CloseButton />
          <Modal.Header fontSize="4xl" fontWeight="bold">
            Delete Customer
          </Modal.Header>
          <Modal.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Modal.Body>
          <Modal.Footer>
            <Button variant="unstyled" mr="1" onPress={onClose}>
              Cancel
            </Button>
            <Button colorScheme="error" onPress={onClose}>
              Delete
            </Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
      <Button onPress={onOpen}>Open Modal</Button>
    </Center>;
};const Example = () => {
  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  return <Center>
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Content>
          <Modal.CloseButton />
          <Modal.Header fontSize="4xl" fontWeight="bold">
            Delete Customer
          </Modal.Header>
          <Modal.Body>
            This will remove all data relating to Alex. This action cannot be
            reversed. Deleted data can not be recovered.
          </Modal.Body>
          <Modal.Footer>
            <Button variant="unstyled" mr="1" onPress={onClose}>
              Cancel
            </Button>
            <Button colorScheme="error" onPress={onClose}>
              Delete
            </Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
      <Button onPress={onOpen}>Open Modal</Button>
    </Center>;
};

Return value

The useDisclosure hook returns an object with the following fields:

isOpen: ( boolean ) Show the component; triggers the enter or exit states.

onClose: ( function ) Callback function to set a falsy value for the isOpen parameter.

onOpen: ( function ) Callback function to set a truthy value for the isOpen parameter.

onToggle: ( function ) Callback function to toggle the value of the isOpen parameter.

Quick Nav

useDisclose | NativeBase | Universal Components for React and React Native