Collapsible

Collapsible provides expandable/collapsible disclosure containers with smooth 220ms Reanimated height scaling, unconstrained layout height measurement, and haptic feedback on toggle.

Usage

CollapsibleExample.tsx

import React from 'react';
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Card,
  Box,
  Text,
} from '@masumdev/rn-ui';
import { ChevronsUpDown, Package, Truck, CreditCard } from 'lucide-react-native';

export function CollapsibleExample() {
  return (
    <Card outlined>
      <Collapsible defaultOpen={false} style={{ width: '100%' }}>
        <CollapsibleTrigger>
          <Box
            row
            center
            style={{
              justifyContent: 'space-between',
              paddingVertical: 8,
              paddingHorizontal: 12,
              borderRadius: 12,
              borderWidth: 1,
              borderColor: '#E2E8F0',
            }}
          >
            <Box row center gap="sm">
              <Package color="#06B6D4" size={20} />
              <Text weight="700">Order #4189 Details</Text>
            </Box>
            <ChevronsUpDown color="#64748B" size={16} />
          </Box>
        </CollapsibleTrigger>

        <CollapsibleContent>
          <Box gap="sm" style={{ marginTop: 10 }}>
            <Box row center style={{ padding: 12, backgroundColor: '#F8FAFC', borderRadius: 10 }}>
              <Text color="textMuted" variant="bodySmall">Status</Text>
              <Text weight="600" color="success" variant="bodySmall">Shipped (On the way)</Text>
            </Box>

            <Box style={{ padding: 12, backgroundColor: '#F8FAFC', borderRadius: 10, gap: 2 }}>
              <Box row center gap="xs">
                <Truck color="#06B6D4" size={16} />
                <Text weight="600" variant="bodySmall">Shipping Address</Text>
              </Box>
              <Text color="textMuted" variant="bodySmall">100 Market St, San Francisco, CA 94105</Text>
            </Box>
          </Box>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
}

Props API

Collapsible

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Callback triggered when open state changes.
children	ReactNode	—	CollapsibleTrigger and CollapsibleContent.

CollapsibleTrigger

Prop	Type	Default	Description
children	ReactNode | (() => ReactNode)	—	Interactive trigger component or render function.

CollapsibleContent

Prop	Type	Default	Description
children	ReactNode | (() => ReactNode)	—	Collapsible content expanded on toggle.