Installation

pnpmnpmyarnbun
pnpm dlx bna-ui add collapsible
Copy

Usage

Copyimport { Collapsible } from '@/components/ui/collapsible';

Copy<Collapsible title='What is React Native?'>
  <Text>
    React Native is an open-source UI software framework created by Meta. It is
    used to develop applications for multiple platforms.
  </Text>
</Collapsible>

Examples

API Reference

Collapsible

An expandable/collapsible container component that shows or hides its content.

Component Structure

The Collapsible component consists of:

1. Header: A touchable area containing the title and chevron icon
2. Content: The collapsible content that shows/hides based on state
3. Icon: A chevron that rotates to indicate open/closed state

Behavior

• Initially collapsed by default
• Clicking the header toggles the collapsed/expanded state
• Smooth rotation animation for the chevron icon
• Content appears with proper indentation when expanded
• Each collapsible manages its own state independently

Accessibility

The Collapsible component is built with accessibility in mind:

• Uses TouchableOpacity for proper touch handling
• Visual indicator (chevron) shows current state
• Proper spacing and indentation for content hierarchy
• Supports nested content and interactive elements
• Clear visual feedback with activeOpacity on touch

Styling

The component uses:

• Flexible layout with proper spacing
• Icon rotation animation for visual feedback
• Consistent indentation for nested content
• Theme-aware text styling through the Text component
• Responsive touch areas for better usability

Use Cases

Perfect for:

• FAQ sections
• Settings panels
• Navigation menus
• Content organization
• Progressive disclosure
• Help documentation
• Feature explanations