{
  "title": "Box",
  "description": "Generic container primitive; the library's <View>.",
  "url": "/docs/components/box",
  "since": "0.1.0",
  "tags": [
    "primitive",
    "layout"
  ],
  "platform": "both",
  "source": "---\ntitle: Box\ndescription: Generic container primitive; the library's <View>.\nsince: 0.1.0\ntags: [primitive, layout]\nplatform: both\ncategory: primitives\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Box\" />\n\n## At a glance\n\n- Thin wrapper over RN `<View>` / web `<div>` with `className` pass-through.\n- Reach for `HStack` / `VStack` for aligned rows/columns; use Box for ad-hoc containers.\n- Forwards every `View` prop (style, accessibility, layout, ref) untouched.\n\n## Preview\n\n<Preview name=\"box-basic\" />\n\n## Native preview\n\n<ExpoSnack component=\"Box\" height={300} />\n\n## `flex`\n\nShortcut for the most common flexbox sizing knob — `flex={1}` is a\nfill-the-parent container, `flex={0}` shrinks to its content. Anything\nyou'd write as `style={{ flex: n }}` works as `flex={n}` on the prop\nsurface, with the same Yoga layout semantics on RN and web.\n\n```tsx\n<HStack>\n    <Box flex={1}>{/* takes whatever's left */}</Box>\n    <Avatar size=\"sm\" />\n</HStack>\n```\n\nPass `style` if you need cross-axis or basis options too — they merge\nwith the `flex` shortcut, with `style` winning on conflict.\n\n## Props\n\n<PropsTable component=\"Box\" />\n"
}