{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"bottomsheet-universal","type":"registry:item","title":"BottomSheet","description":"A universal @expo/ui modal sheet for presenting content from the bottom of the screen on Android, iOS and web.","files":[{"path":"snippets/bottomsheet-universal.tsx","content":"import { useState } from \"react\";\nimport { useColorScheme } from \"react-native\";\nimport { Host, Column, Button, BottomSheet, Text } from \"@expo/ui\";\n\nexport default function BottomSheetExample() {\n  const [isPresented, setIsPresented] = useState(false);\n  const colorScheme = useColorScheme();\n  const ink = { color: colorScheme === \"dark\" ? \"#FFFFFF\" : \"#000000\" };\n\n  return (\n    <>\n      <Host matchContents>\n        <Button label=\"Open sheet\" onPress={() => setIsPresented(true)} />\n      </Host>\n      <BottomSheet isPresented={isPresented} onDismiss={() => setIsPresented(false)}>\n        <Column spacing={12}>\n          <Text textStyle={{ ...ink, fontSize: 18, fontWeight: \"700\" }}>Sheet contents</Text>\n          <Text textStyle={ink}>Drag down or tap the overlay to dismiss.</Text>\n          <Button label=\"Close\" onPress={() => setIsPresented(false)} />\n        </Column>\n      </BottomSheet>\n    </>\n  );\n}\n","type":"registry:file","target":"~/snippets/bottomsheet-universal.tsx"}],"author":"expo","dependencies":["@expo/ui"]}