Collapsible
A collapsible container component with smooth animations for showing and hiding content.
Installation
Install the component:
npx natively-ui add collapsibleUsage
CollapsibleDemo.jsx
1import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
2
3export default function MyComponent() {
4 return (
5 <Collapsible defaultExpanded={false}>
6 <CollapsibleTrigger>
7 Click to expand
8 </CollapsibleTrigger>
9 <CollapsibleContent>
10 <View style={{ padding: 16 }}>
11 <Text>This content can be collapsed!</Text>
12 </View>
13 </CollapsibleContent>
14 </Collapsible>
15 );
16}Props
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultExpanded | boolean | false | Whether the collapsible is expanded by default. |
| onExpandedChange | (expanded: boolean) => void | - | Callback function called when the expanded state changes. |
| className | string | "" | Additional CSS classes for the collapsible container. |
CollapsibleTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| expanded | boolean | - | Override the expanded state. Use for controlled components. |
| onExpandedChange | (expanded: boolean) => void | - | Override the expanded change handler for controlled usage. |
| className | string | "" | Additional CSS classes for the trigger button. |
CollapsibleContent
| Prop | Type | Default | Description |
|---|---|---|---|
| expanded | boolean | - | Override the expanded state. Use for controlled components. |
| className | string | "" | Additional CSS classes for the content container. |
Features
- Smooth height animations with configurable timing
- Automatic content height measurement
- Context-based state management between components
- Controlled and uncontrolled usage patterns
- Built-in chevron icons that rotate based on state
- Customizable styling with className props
- Optimized rendering with proper layout measurement
- Built with React Native Animated API for smooth performance
Examples
Basic Usage
CollapsibleDemo.jsx
1<Collapsible>
2 <CollapsibleTrigger>
3 <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
4 Frequently Asked Questions
5 </Text>
6 </CollapsibleTrigger>
7 <CollapsibleContent>
8 <View style={{ padding: 16, backgroundColor: '#f5f5f5' }}>
9 <Text>Here are the answers to common questions about our service.</Text>
10 </View>
11 </CollapsibleContent>
12</Collapsible>Default Expanded
CollapsibleDemo.jsx
1<Collapsible defaultExpanded={true}>
2 <CollapsibleTrigger>
3 <Text>Important Information (Expanded by default)</Text>
4 </CollapsibleTrigger>
5 <CollapsibleContent>
6 <View style={{ padding: 16 }}>
7 <Text>This content is visible when the component first renders.</Text>
8 </View>
9 </CollapsibleContent>
10</Collapsible>Controlled Component
CollapsibleDemo.jsx
1const [isExpanded, setIsExpanded] = useState(false);
2
3<View style={{ gap: 16 }}>
4 <Button onPress={() => setIsExpanded(!isExpanded)}>
5 {isExpanded ? 'Collapse' : 'Expand'} Externally
6 </Button>
7
8 <Collapsible onExpandedChange={setIsExpanded}>
9 <CollapsibleTrigger expanded={isExpanded}>
10 <Text>Controlled Collapsible</Text>
11 </CollapsibleTrigger>
12 <CollapsibleContent expanded={isExpanded}>
13 <View style={{ padding: 16 }}>
14 <Text>This collapsible is controlled by external state.</Text>
15 </View>
16 </CollapsibleContent>
17 </Collapsible>
18</View>Custom Styling
CollapsibleDemo.jsx
1<Collapsible className="border border-gray-200 rounded-lg overflow-hidden">
2 <CollapsibleTrigger className="bg-blue-50 p-4 border-b border-gray-200">
3 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
4 <Icon name="info-circle" size={20} color="#3b82f6" />
5 <Text style={{ fontSize: 16, fontWeight: '600', color: '#3b82f6' }}>
6 Product Details
7 </Text>
8 </View>
9 </CollapsibleTrigger>
10 <CollapsibleContent>
11 <View style={{ padding: 20, backgroundColor: 'white' }}>
12 <Text style={{ lineHeight: 20 }}>
13 Detailed product information and specifications will be displayed here.
14 </Text>
15 </View>
16 </CollapsibleContent>
17</Collapsible>Accordion Pattern
CollapsibleDemo.jsx
1<View style={{ gap: 8 }}>
2 <Collapsible>
3 <CollapsibleTrigger>
4 <Text>Section 1: Getting Started</Text>
5 </CollapsibleTrigger>
6 <CollapsibleContent>
7 <View style={{ padding: 16 }}>
8 <Text>Learn the basics of using our platform.</Text>
9 </View>
10 </CollapsibleContent>
11 </Collapsible>
12
13 <Collapsible>
14 <CollapsibleTrigger>
15 <Text>Section 2: Advanced Features</Text>
16 </CollapsibleTrigger>
17 <CollapsibleContent>
18 <View style={{ padding: 16 }}>
19 <Text>Explore advanced functionality and customization options.</Text>
20 </View>
21 </CollapsibleContent>
22 </Collapsible>
23
24 <Collapsible>
25 <CollapsibleTrigger>
26 <Text>Section 3: Troubleshooting</Text>
27 </CollapsibleTrigger>
28 <CollapsibleContent>
29 <View style={{ padding: 16 }}>
30 <Text>Common issues and their solutions.</Text>
31 </View>
32 </CollapsibleContent>
33 </Collapsible>
34</View>