{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"collapsible-universal","type":"registry:item","title":"Collapsible","description":"A universal @expo/ui labelled header that toggles the visibility of its content on Android, iOS and web.","files":[{"path":"snippets/collapsible-universal.tsx","content":"import { useState } from \"react\";\nimport { useColorScheme } from \"react-native\";\nimport { Host, Column, Collapsible, Text } from \"@expo/ui\";\n\nexport default function CollapsibleExample() {\n  const [open, setOpen] = useState(false);\n  const colorScheme = useColorScheme();\n  const ink = { color: colorScheme === \"dark\" ? \"#FFFFFF\" : \"#000000\" };\n\n  return (\n    <Host matchContents={{ vertical: true }} style={{ width: \"100%\" }}>\n      <Column spacing={8} style={{ padding: 16 }}>\n        <Collapsible isOpen={open} onOpenChange={setOpen} label=\"About\">\n          <Text textStyle={ink}>\n            A primitive that toggles visibility of its content via a labelled tappable header.\n          </Text>\n        </Collapsible>\n      </Column>\n    </Host>\n  );\n}\n","type":"registry:file","target":"~/snippets/collapsible-universal.tsx"}],"author":"expo","dependencies":["@expo/ui"]}