Expandable

A component that provides a collapsible container with smooth animations for showing or hiding content.

Import

import Expandable from '@/components/Expandable';

Features

Smooth expand/collapse animations
Customizable header with title and optional icon
Controlled or uncontrolled usage
Custom styling options

Props

Prop	Type	Default	Description
`title`	`string`	—	Text displayed in the header
`titleComponent`	`ReactNode`	—	Custom component to replace the title
`defaultOpen`	`boolean`	`false`	Initial expanded state (uncontrolled)
`open`	`boolean`	—	Controlled expanded state
`onOpenChange`	`(open: boolean) => void`	—	Callback when expanded state changes
`headerClassName`	`string`	—	Additional classes for header
`contentClassName`	`string`	—	Additional classes for content
`children`	`ReactNode`	—	Content to show when expanded
`headerIcon`	`IconName`	—	Icon to show next to title

Basic Usage

// Basic expandable section
<Expandable title="Frequently Asked Questions">
  <Text>This content will be shown when expanded.</Text>
</Expandable>
 
// Initially expanded
<Expandable title="Details" defaultOpen>
  <Text>This section starts expanded.</Text>
</Expandable>
 
// Controlled expandable
<Expandable 
  title="Settings" 
  open={isOpen} 
  onOpenChange={setIsOpen}
>
  <Text>Toggle controlled externally</Text>
</Expandable>

With Icon

<Expandable
  icon="CreditCard"
  title="Payment Methods"
  description="Manage your payment options"
>
  <View className="space-y-4 pt-2">
    {/* Payment method options */}
  </View>
</Expandable>

Controlled Mode

import React, { useState } from 'react';
 
function ControlledExpandable() {
  const [expanded, setExpanded] = useState(false);
  
  return (
    <Expandable
      title="Advanced Settings"
      expanded={expanded}
      onPress={() => setExpanded(!expanded)}
    >
      {/* Content */}
    </Expandable>
  );
}

Expandable

Expandable

Import

Features

Props

Basic Usage

With Icon

Controlled Mode

On this page