Collapsible

import { StyleSheet } from 'react-native-unistyles';
 
import { Collapsible } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';
 
const recoveryKeys = ['4829-1735-6621', '9182-6407-5532', '3051-7924-9018'];
 
export function CollapsibleDemo() {
  return (
    <Collapsible>
      <Collapsible.Trigger as={Button} size="sm" variant="outline">
        <Button.Text>Show recovery keys</Button.Text>
        <Collapsible.State>
          {state => (
            <Button.Icon
              name={state.open ? 'chevron-up' : 'chevron-down'}
            />
          )}
        </Collapsible.State>
      </Collapsible.Trigger>
      <Collapsible.Content style={styles.collapsibleContent}>
        {recoveryKeys.map(key => (
          <Text key={key} style={styles.keyItem}>
            {key}
          </Text>
        ))}
      </Collapsible.Content>
    </Collapsible>
  );
}
 
const styles = StyleSheet.create(theme => ({
  collapsibleContent: {
    paddingTop: theme.space.md,
    gap: theme.space.md,
  },
  keyItem: {
    paddingHorizontal: theme.space.lg,
    paddingVertical: theme.space.sm,
    borderRadius: theme.radius.sm,
    borderCurve: 'continuous',
    backgroundColor: theme.colors.muted,
  },
}));