Collapsible

import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/Collapsible';
import { Button, ButtonIcon } from '@/components/ui/Button';
import { Text } from '@/components/ui/Text';
 
export function MyCheckbox() {
  const { styles } = useStyles(stylesheet);
 
  return (
    <Collapsible>
      <CollapsibleTrigger as={Button} variant="soft" iconOnly>
        <ButtonIcon name={'chevron-expand'} />
      </CollapsibleTrigger>
      <CollapsibleContent style={styles.collapsibleContent}>
        <Text variant="bodySm">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </Text>
      </CollapsibleContent>
    </Collapsible>
  );
}
 
const stylesheet = createStyleSheet((theme) => ({
  collapsibleContent: {
    padding: theme.space[12],
    gap: theme.space[4],
    borderRadius: theme.radius.md,
    borderCurve: 'continuous',
    backgroundColor: theme.colors.neutral3,
  },
}));