Collapsible

Collapsible Primitive

Demo

A dynamic element that facilitates the expansion or collapse of a panel.

Installation

CLI

npx @react-native-reusables/cli@latest add collapsible

Manual

Dependency

Before copy/pasting, add the Collapsible primitive to your project.

Copy/paste the following code to ~/components/ui/collapsible.tsx:

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/collapsible';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Collapsible>
            <CollapsibleTrigger >
               <Text>Toggle</Text>
            </CollapsibleTrigger>
            <CollapsibleContent >
              <Text>@radix-ui/react</Text>
            </CollapsibleContent>
      </Collapsible>
  );
}

Props

Collapsible

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
open	boolean	(optional)
onOpenChange	(value: boolean) => void	(optional)
defaultOpen	boolean	(optional)
disabled	boolean	(optional)

CollapsibleTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

CollapsibleContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined;	(optional)