Disclosure

Installation

To get started, install Headless UI via npm:

npm install headlessui-react-native

Basic example

Modals are built using the Disclosure, DisclosureButton, and DisclosurePanel components. The button will automatically open/close the panel when clicked.

import {
  CloseButton,
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "headlessui-react-native";
import React from "react";
import { View, Text, ViewStyle, TextStyle } from "react-native";
 
export function DisclosureExample() {
  return (
    <View>
      <Disclosure style={disclosureStyle}>
        <DisclosureButton style={disclosureButtonStyle}>
          {({ open }) => (
            <>
              <Text style={disclosureButtonTextStyle}>
                What is your refund policy?
              </Text>
              <Arrow rotate={open} />
            </>
          )}
        </DisclosureButton>
        <DisclosurePanel>
          <Text style={disclosurePannelTextStyle}>
            If you're unhappy with your purchase, we'll refund you in full.
          </Text>
        </DisclosurePanel>
      </Disclosure>
      <Disclosure style={disclosureStyle}>
        <DisclosureButton style={disclosureButtonStyle}>
          {({ open }) => (
            <>
              <Text style={disclosureButtonTextStyle}>
                Do you offer technical support?
              </Text>
              <Arrow rotate={open} />
            </>
          )}
        </DisclosureButton>
        <DisclosurePanel>
          <Text style={disclosurePannelTextStyle}>No.</Text>
        </DisclosurePanel>
      </Disclosure>
    </View>
  );
}
 
const disclosureStyle: ViewStyle = {
  width: 300,
  padding: 16,
  backgroundColor: "rgb(33, 150, 243)",
};
const disclosureButtonStyle: ViewStyle = {
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "space-between",
};
const disclosureButtonTextStyle: TextStyle = { color: "white" };
const disclosurePannelTextStyle: TextStyle = {
  color: "rgba(0, 0, 0, 0.6)",
};
 
const Arrow = ({ rotate }: { rotate: boolean }) => (
  <Text
    style={{
      color: "white",
      transform: [{ rotate: rotate ? "180deg" : "0deg" }],
    }}
  >
    ▼
  </Text>
);

Examples

Closing disclosures manually

To close a disclosure manually when clicking a child of its panel, render that child as a CloseButton.

import {
  CloseButton,
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "headlessui-react-native";
import React from "react";
import { Text } from "react-native";
 
function Example() {
  return (
    <Disclosure defaultOpen>
      <DisclosureButton>Open mobile menu</DisclosureButton>
      <DisclosurePanel>
        <CloseButton>
          <Text>Home</Text>
        </CloseButton>
      </DisclosurePanel>
    </Disclosure>
  );
}

Component API

Disclosure

The main disclosure component.

Prop	Default	Description
`as`	`Fragment`	`String` The element the disclosure should render as.
`defaultOpen`	`false`	`Boolean` Whether or not the `Disclosure` component should be open by default.

Render Prop	Description
`open`	`Boolean` Whether the disclosure is open or not.
`close`	`() => void` Closes the disclosure.

DisclosureButton

The trigger component that toggles a Disclosure.

Prop	Default	Description
`as`	`Pressable`	`String` The element the disclosure button should render as.

Render Prop	Description
`open`	`Boolean` Whether the disclosure is open or not.

DisclosurePanel

This component contains the contents of your disclosure.

Prop	Default	Description
`as`	`View`	`String` The element the disclosure panel should render as.

Render Prop	Description
`open`	`Boolean` Whether the disclosure is open or not.
`close`	`() => void` Closes the disclosure.

CloseButton

This button will close the nearest Disclosure ancestor when clicked.

Prop	Default	Description
`as`	`Pressable`	`String` The element the close button should render as.

Modal (Dialog)